Belajar HTML Part 15: Cara Membuat Form di HTML (tag form)
Halo kawan-kawan, pada kesematan kali ini kita akan membahas Cara Membuat Form di HTML (tag form)
Form dalam HTML merupakan tempat penginputan data sebelum diproses oleh bahasa pemograman web seperti JavaScript atau PHP, dan disimpan di dalam MySQL.
Menggunakan HTML saja tidak akan terlalu berguna. Oleh sebab itu setelah mempelajari cara menampilkan tag form dalam usaha menginputkan data user ke dalam sistem,selanjutnya kita harus mempelajari bahasa pemograman lain seperti JavaScript atau PHP. Untuk pembahasan lebih lanjut, dapat dibaca pada penjelasan di tutorial tentang PHP dan JavaScript.
Beberapa fungsi tag form antara lain form login, form comment, form data user, dan lain-lain.
Tag dasar yang akan kita gunakan untuk membuat form di HTML adalah tag form, input, textarea, select dan option.
tag <form>
dalam tag <form> dibutuhkan beberapa atribut untuk memproses data yang akan dikirim. Atribut yang dimaksud antara lain atribut action dan method.
- - Nilai dari atribut action menjelaskan kemana data akan dikirim, biasanya berupa alamat dari sebuah halaman PHP yang digunakan untuk memproses isi data form.
- - Nilai dari atribut method ini biasanya berupa get atau post. Atribut method dengan nilai get, maka isian form akan terlihat pada url browser. Sedangkan atribut method dengan nilai post, maka data hasil form tidak akan terlihat pada browser, biasanya digunakan untuk data yang lebih sensitif seperti yang berisi password, atau registrasi user.
Struktur dasar form akan terlihat sebagai berikut:
<form action="formulir.php" method="get">
...isi form...
</form>
tag <input>
tag <input> merupakan tag yang akan digunakan dalam form pengisian. Tag ini memiliki banyak sekali bentuk antara lain isian teks, password, checkbox, radio button, sampai dengan tombol submit.
Bentuk-bentuk dari keluarga tag input ini dibedakan berdasarkan atribut type:
- <input type=”text” /> atau bisa juga <input /> adalah textbox yang bisa menerima inputan text misalkan username atau text yang pendek.
- <input type=”password” /> dalam tampilannya sama dengan type text, namun teks yang diinput tidak akan terlihat, akan berupa bintang atau bulatan. Biasanya hanya digunakan untuk inputan yang sensitif seperti password.
- <input type=”radio” /> mirip dengan checkbox, namun user hanya bisa memilih satu diantara pilihan group radio. Type radio ini berada dalam suatu grup dan user hanya bisa memilih salah satunya. Contoh inputan type radio adalah jenis kelamin.
- <input type=”checkbox” /> adalah inputan berupa checkbox yang dapat diceklist atau di centang oleh user. User dapat memilih atau tidak memilih checkbox ini. Type checkbox memiliki atribut checked yang jika ditulis atau diisi dengan nilai checked, akan membuat chexkbox langsung terpilih pada saat pertama kali halaman ditampilkan. Contoh inputan checkbox berupa hobi, yang oleh user dapat dipilih beberapa hobi.
- <input type=”submit” /> akan menampilkan tombol untuk memproses form. Biasanya diletakkan pada baris terakhir dari form. Atribut value jika diisi akan membuat text tombol submit berubah sesuai inputan nilai value.
tag <select>
tag <select> merupakan tag yang digunakan untuk user memilih data yang sudah disediakan. Dalam penggunaan tag select selalu diikuti dengan tag option yang berguna untuk membuat pilihan.
Contoh penggunaan tag select adalah sebagai berikut:
<select>
<option>Jakarta </option>
<option>Bandung </option>
<option>Surabaya </option>
</select>
tag textarea
tag textarea merupakan tag yang sama fungsinya dengan inutan text, hanya saja pada textarea dapat diisikan dengan lebih banyak teks didalamnya. Panjang dan banyak baris untuk text area di atur melalui atribut rows dan cols, atau melalui CSS.
Contoh penggunaan textarea adalah sebagai berikut:
<textarea rows="5" cols="20">
.....Isian Pesan Teks
</textarea>
Atribut: Name
Atribut name merupakan atribut yang nilainya akan digunakan pada saat memproses data oleh webserver. Di dalam halaman proses (yang biasanya berupa bahasa PHP atau ASP), nilai dari atribut name inilah yang akan menjadi variabel form. Contoh pemakaiannya adalah sebagai berikut:
<input type="text" name="nama"><br/>
<input type="text" name="alamat"><br/>
<input type="password" name="pass"><br/>
Ketiga input diatas akan tampak sama persis, namun pada saat pemrosesan data, masing-masing akan dibedakan menurut atribut name.
Akhirnya, Sebuah Form Utuh
Langsung saja text editor, dan tuliskan kode HTML berikut, lalu save sebagai formulir.html
Contoh penggunaan tag form:
<!DOCTYPE html>
<html>
<head>
<title>Belajar Membuat Form HTML</title>
</head>
<body>
<form action="Formulir.php" method="get">
<!--tag form harus ditambah tag-tag lain disini agar ia dapat berfungsi, tag-tag itu antara lain tag input, select, textarea -->
<!--tag input-->
Nama: <input type="text" name="name" value="Nama kamu"/><br/>
Password: <input type="password" name="pass" value="Password"/><br/>
Jenis kelamin:
<input type="radio" name="j.k" value="Laki-laki" checked/>Laki-laki
<input type="radio" name="j.k" value="Perempuan"/>Perempuan<br/>
Keahlian:
<input type="checkbox" name="PHP"/>PHP
<input type="checkbox" name="Java"/>Java
<input type="checkbox" name="HTML" checked/>HTML<br/>
<!--tag select-->
Asal Kota:
<select name="asal_kota">
<option value="Jakarta">Jakarta</option>
<option value="Bandung">Bandung</option>
<option value="Surabaya" selected >Surabaya</option>
</select>
<br />
<!--tag textarea-->
Keterangan Tambahan
<textarea name="komentar" rows="5" cols="20">
Masukan keteragan tambahan yang ingin and sampaikan
</textarea>
<br />
<!--tag input type= submit-->
<input type="submit" value="Proses data"/>
</form>
</body>
</html>
Hasil code
Terlepas dari tampilan yang kurang rapi, disini kita telah mempelajari penggunaan tag form dalam HTML. Untuk mempercantih tampilan kita perlu mempelajari lebih dalam tentang CSS, sedangkan untuk memproses data formulir HTML, maka kita perlu belajar tentang PHP. Setelah membahas Tutorial HTML, selanjutnya baru kita akan membahas lebih terkait CSS dan PHP.
Didalam form HTML sendiri terdapat banyak jenis atribut. Pada pembahasan selanjutnya, kita akan belajar lebih dalam tentang Macam-macam Atribut Form pada HTML.