Cara Membuat Formulir/Form pada Halaman HTML

html

Form atau formulir digunakan sebagai pengumpul data dari halaman web.Bisa saja untuk menhimpun data nama, alamat dan berbagai keperluan lainnya. Dalam hal ini akan dilihat bagaimana membuat sebuah form isian pada halaman HTML.
Pada dasarnya untuk formulir akan disertakan dengan bahasa pemograman lain seperti javascript, PHP dan kemudian isi form tersebut akan disimpan dalam MySQL. Untuk kali ini akan dibatasi sebatas pembuatan tampilan formulir dengan HTML. Dalam pembuatan formulir akan digunakan tag <form>,<input> <text area>, <select> dan <option>. Penjelasan masing masing beserta cara pembuatannya akan dijelaskan berikut ini.

Penggunaan tag <form> dalam HTML

Tag <form> ini adalah sebuah perintah bahwasanya bagian di antara <form> hingga </form> nantinya adalah sebuah formulir. Dalam hal ini ada sambungan lain yang harus diberikan yaitu:

1. Action : digunakan untuk mendefenisikan kemana data isian formulir tersebut akan disampaikan dan disimpan. Biasanya action ini akan merujuk sebuah halaman php untuk melakukan proses data terhadap isi form.
2. Method :  digunakan untuk memberikan perintah bagaimana data isi form akan dikirim oleh browser. Nilai tersebut bisa berupa get dan post. Nilai get, akan menampilkan isian form pada bar url (alamat url) Pengunaan ini misalnya untuk kotak pencarian. Sementara untuk nilai Post isian formulir tidak akan ditampilkan pada alamat url. Jenis method ini digunakan untuk form log in atau sign up.

Format umum dalam penulisan formulir bisa dilihat sebagai berikut :

<form action= 'sebuahalamaturl.php" method="post">...Isi formulir..</form>

Membuat Input data pada Form HTML

Untuk memasukkan data atau pembuatan isi formulir digunakan tag <input>. Di sini pengaturan bagaimana tipe data yang akan dimasukkan. Misalnya data masukan berupa teks, berupa pasword (diketik hanya tampil bullet), check box, radio, perintah submit dan lain lain. Untuk membuat perintah tersebut sesuai input-an data maka digunakan tambahan pada tag input  berikut ini,

1. <input type ='text'/> atau bisa dipakai <input/>. Jenis ini digunakan untuk data masukan berupa teks, nama, username.
2. <input type='password'/> digunakan untuk input-data yang tak terlihat ketika diketik. Seperti password.
3. <input type='checkbox'/> untuk input data berupa centang contoh pada daftar pesanan makanan yang harus dipilih ketika telah disediakan sejmlah menu.
4. <input ='radio'/> digunakan untuk memilih satu dari beberapa pilihan. Seperti untuk data jenis kelamin.
5. <input type='submit/> digunakan untuk menampilkan sebuah tombol perintah untuk agar data diproses browser. Ini terletak pada bagian akhir form biasanya.

Untuk tag input ini termasuk jenis tag self-closing, dimana bisa ditambahkan /> pada tag pembuka. Sama seperti tag <br/>.

Tag  <textarea> pada form HTML

Fungsi tag <textarea> ini adalah untuk menampilkan teks sebelum formulir isian. Contohnya ketika form dalam keadan belum di isi maka akan tampil kalimat ini. Contoh penulisannya bisa dlihat pada script ini (jangan dicompile dulu, nanti akan dicompile secara keseluuhan).

Bagaimana Pendapat Anda:

<textarea name="komentar" rows="5" cols="20">

Katakan Apa Saja disini

</textarea>

Tag  <select> pada form HTML

Kegunaan tag ini adalah untuk menampilkan data yang telah ada dan menyuruh user untuk memilih. Tampilannya berupa sebuah kolom dan jika diklik akan menampilkan beberapa pilihan ke bawah. Dalam hal ini pilihan tersembunyi pada awalnya. Contoh penulisanya sebagai berikut: 

Kota Asal:

<select name="asal_kota" >

<option value="Kota Padang"> Padang</option>

<option>Batam</option>

<option value="Kota Meroke" selected>Meroke</option>

</select>

Pada kota padang terlihat ada atribut value. Ini digunakan untuk mengirimkan suatu nilai tersebut dalam nilai variabel dan nilai variabel tersebut akan diproses dengan pemograman lain misalnya. Seperti akan diproses dengan fungsi IF pada javascript. Pada pilihan BATAM tidak diikuti value. Artinya jika menulis seperti ini, maka data tersebut isinyaya BATAM. Tidak bisa digunakan dalam pengolahan data pada program lain.

Jika diperhatikan pada kota Meroke ada tambahan atribut lain yaitu selected . Ini digunakan sebagai tampilan default ketika pengunjung belum memilih isian.

Atribut Name pada Form HTML

Atribut name pada form html berfungsi untuk perintah dalam memproses data. Name ini akan dibaca sebagai variabel. Bedakan dengan value, pada value itu data adalah NILAI VARIABEL-nya. Sementara untuk NAME adalah variabelnya. Name ini nantinya akan terhubung pada sistem program pengolahan data seperti javascript atau php.

Contoh penulisan name ini sebagai berikut :

Jenis Kelamin :

<input type="radio" name="jenis_kelamin" value="laki-laki" checked />

Pria

<input type="radio" name="jenis_kelamin" value="perempuan" />

Wanita

Contoh Form dalam Kode HTML

Untuk contoh sebuah kode yang utuh bisa dilihat dan dicompile kode dibawah ini

<!DOCTYPE html>

<html>

<head>

<title> Curhat Mamah Bebeh </title>

</head>

<body>

<h2> Curhat Sama Mamah Bebeh </h2>

<form action=" form1.html" method="get">

Email/Username: <input type="text" name="nama" value="Isi Nama / Email" />

<br />

Password: <input type="password" name="password" />

<br />

Jenis Kelamin :

<input type="radio" name="jenis_kelamin" value="laki-laki" checked />

Pria

<input type="radio" name="jenis_kelamin" value="perempuan" />

Wanita

<br />

Hobi: <input type="checkbox" name="hobi_baca" /> Membaca Komik

<input type="checkbox" name="hobi_nulis" checked /> Menulis Komik

<input type="checkbox" name="hobi_mancing" /> Mancing Mania

<br />

Kota Asal:

<select name="asal_kota" >

<option value="Kota Padang"> Padang</option>

<option>Batam</option>

<option value="Kota Meroke" selected>Meroke</option>

<option value="pilihan ketiga" selected>Pilihan 3</option>

</select>

<br />

Bagaimana Pendapat Anda:

<textarea name="komentar" rows="5" cols="20">

Katakan Apa Saja disini

</textarea>

<br />

<input type="submit" value="Proses Curhat Saya" >

</form>

</body>

</html>

Tampilan form di atas memang kurang rapi. Untuk pengatura kerapian form biasanya digunakan CSS. Ketika data di submit (Proses Curhat Saya) akan tampil halaman error, ini dikarenakan anda belum menghubungkan dengan pe-proses data seperti php dan javascript.

Dari script di atas, coba diubah method-nya menjadi get.  Ketika disubmit maka semua data isian akan terlihat di bar alamat website. Inilah perbedaannya ketika menggunakan method get  dan method  action.

Share Yuk

Facebook Twitter Linkedin

Related Posts

Loading...