Penggunaan Form pada HTML

Form adalah salah satu elemen HTML yang sangat sering dijumpai bagi anda pengguna layanan internet. Hampir seluruh halaman web yang anda kunjungi mengandung unsur form didalamnya. Form dapat ditemukan pada halaman web yang memiliki fungsi komunikasi, bukan hanya komunikasi antar pengguna internet seperti chatting, social network, dan email, tetapi juga komunikasi antara pengguna internet dengan web server seperti format pendaftaran untuk membuat account sebuah situs. Saat seseorang hendak membuat account sebuah situs, dia memberikan informasi kepada web server yang biasanya berupa identitas diri. Identitas tersebut diinputkan melalui form kemudian dikirim ke database web server.
Jadi, form biasanya digunakan untuk halaman web yang bersifat dinamis sehingga memungkinkan terjadinya komunikasi antara user dengan web server atau user lain. Form memungkinkan suatu web server untuk menerima informasi dari user melalui sejumlah elemen kontrol. Elemen kontrol yang dapat digunakan untuk membuat form yaitu :

1. Teks baris tunggal
2. Teks baris jamak
3. Teks password
4. Tombol submit dan reset
5. Checkbox
6. Radio button
7. Menu pop-up

Sebelum mempelajari cara membuat elemen-elemen kontrol di atas, anda sebaiknya mengetahui terlebih dahulu struktur tag yang digunakan untuk membuat
form. Berikut strukturnya :

Dari struktur di atas dapat diketahui bahwa cara pembuatan form dalam HTML adalah dengan menambahkan tag <form> ... </form>, kemudian ditambahkan dengan atribut tag METHOD dan ACTION.

Fungsi atribut METHOD adalah untuk menentukan metoda apa yang digunakan untuk mengirim data ke script tujuan. Dalam hal ini ada 2 cara yang dapat digunakan yaitu GET dan POST. Keduanya tentu memiliki perbedaan dari cara mengirimkan data. Sedangkan untuk fungsi dari atribut ACTION adalah untuk menentukan URL tujuan dari script yang akan menerima data dari form.

Sebagai contoh perhatikan tag berikut :

<form method="post" action="identitas.php">
    ... elemen kontrol ...
</form>

Dari tag di atas dapat diketahui bahwa pada form tersebut, data yang diinputkan oleh user akan dikirimkan dengan cara post ke sebuah file PHP dengan nama identitas.php yang letaknya ada di direktori tempat dimana file HTML (yang berisi form tersebut) berada.

Setelah mengetahui struktur dari tag form, selanjutnya akan dibahas mengenai elemen kontrol pada form. Ada 3 tag yang digunakan untuk membuat elemen kontrol pada form yaitu :

1. Tag <input>, untuk membuat elemen text, checkbox, radio button, tombol submit, dan tombol reset.
2. Tag <select>, untuk membuat menu pop-up.
3. Tag <textarea>, untuk membuat kolom isian teks panjang.

TAG <input>
Tag ini digunakan untuk membuat elemen text (default text, password text, hidden text), checkbox, radio button, tombol submit, dan tombol reset. Dalam penggunaannya, tag ini tidak dapat berdiri sendiri, tag ini membutuhkan atribut tag pendukung sehingga dapat menampilkan form pada HTML. Atribut tersebut adalah TYPE, NAME, dan VALUE. Berikut strukturnya :

<input type="..." name="..." value="...">

Fungsi dari atribut TYPE adalah untuk menentukan tipe elemen kontrol yang akan digunakan. Berikut daftar nilai atribut TYPE yang dapat digunakan beserta fungsinya :

NILAI ATRIBUT TYPE

TYPE	FUNGSI
text	membuat kotak teks 1 baris
password	menerima input berupa password
hidden	menerima input hidden text
checkbox	membuat kotak periksa
radio	membuat tombol radio button
submit	membuat tombol submit
reset	membuat tombol reset

Untuk memahaminya, saya akan memberikan beberapa contoh. Pertama-tama saya akan memberikan contoh sederhana penggunaan elemen kontrol text, password, tombol submit, dan tombol reset. Perhatikan tag berikut :

Dari tag tersebut dihasilkan form pada web browser seperti berikut :

Selanjutnya saya akan memberikan contoh penggunaan elemen checkbox pada form HTML. Perhatikan contoh penggunaan checkbox pada contoh tag berikut :

Dari contoh di atas dapat dihasilkan elemen kontrol checkbox seperti berikut :

Kemudian berikut adalah contoh tag penggunaan elemen radio button pada form HTML :

Dan hasilnya adalah sebagai berikut :

————————————————————————————————————

TAG <select>
Tag ini digunakan untuk membuat menu pop-up. Dari segi fungsi tidak jauh berbeda dengan radio button, karena keduanya bermaksud untuk membuat user memilih salah satu dari opsi yang disediakan. Namun dari segi bentuk, menu pop-up berbeda dengan radio button. Menu pop-up dibuat dengan menggunakan tag <select>, dan untuk membuat daftar opsi, gunakan tag <option>. Perhatikan contoh berikut :

Hasil dari tag pembuatan menu pop-up di atas adalah sebagai berikut :

————————————————————————————————————

TAG <textarea>
Tag ini digunakan untuk membuat kolom isian teks yang panjang. Biasanya digunakan untuk membuat form pengisian komentar, post artikel, dll. Perhatikan contoh tag berikut :

Hasil dari tag di atas adalah sebagai berikut :

Pada contoh di atas terdapat atribut tag ROWS dan COLS yang dapat anda gunakan untuk mengatur besar kecilnya text area tersebut.