Tutorial HTML : Membuat Form

Keberadaan form pada website sangat membantu lebih interfaktivenya suatu website, guna mengumpulkan informasi dan data dari user/pengunjung suatu website. Seperti halnya form pada dunia nyata, form pada website juga berisi baris-baris isian. Informasi ini akan dikumpulkan dan nantinya akan diproses oleh sistem. Tapi perlu dicatat, pada tutorial pembuatan form ini kita tidak akan membahas bagaimana data diproses. Nanti akan kita bahas secara lugas di artikel lainnya.

Medefenisikan Elemen <form>

Form pada html akan dijumpai dengan tag <form> dan diakhiri </form>, simak sintaks berikut.

<form action="fileproses" method="GET|POST">
    <!-- field / kolom isian disini -->
</form>

Sama seperti tag lainnya, form juga dibubuhi atribut html lainnya dan atribut khusus yaitu “action” dan “method“.

  • action, atribut ini berisi alamat file yang akan memproses data nantinya.
  • method, atribut ini berisi metode yang akan dipakai dalam proses pengiriman data (GET atau POST)

Sebagai contoh,

<form action="proses.php" method="GET">
   <!-- field / kolom isian disini -->
</form>

Membuat Field Isian Form

FIeld merupakan area input yang menjadi kotak isian dari si pengguna dalam menggunakan form. Ada beberapa elemen field pada HTML.

Tag <input>

Tag <input> ini merupakan tag yang paling sering digunakan. Kakteristiknya berupa form pengisian. Contoh, saat login di facebook.com, ada isian email dan password. Nah, kedua elemen itu dibentuk dengan <input>.

HTML Dasar : Form 1

Ada beberapa tipe dalam <input>,

  • <input type=”text”>, merupakan field dengan karakteristik isian berupa teks, numeric dan/atau simbol.
  • <input type=”password”> merupakaan field seperti text namun berdanya tampilan isian berupa titik atau bintang saja.
  • <input type=”radio”> merupakan field dimana user disediakan pilihan pilihan untuk dipilih satu saja. Field ini akan sering kita lihat contohnya pada pemilihan jenis kelamin.
  • <input type=”checkbox”> juga merupakan field pilihan bagi user dengan karakteristik memilih berupa centang. Biasanya pilihan bisa lebih dari satu atau bahkan hanya satu.
  • <input type=”submit”> berupa tombol yang berguna untuk mengakhiri isian dan memproses data dari form.
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <form>
       <h3>Silahkan Login</h3>
        Uername : 
        <input type="text">
        Password : 
        <input type="text">
        Gender : 
        <input type="radio"> Male
        <input type="radio"> Female
        Are you aggree ? 
        <input type="checkbox">
        Password : 
        <input type="submit" value="Kirim">
    </form>
</body>
</html>

Tag <select>

Saat melakukan pendaftaran (cth. facebook) kita akan menemukan pilihan tanggal lahir berupa list yang sangat panjang. Nah, list ini dibangun dengan bantuan <select> sebagai pembungkus field dan <option> sebagai list nya sendiri.

Tag <option> juga memiliki atribut yaitu value, dimana merupakan nilai yang akan dikirim ke file prosesnya nanti,.

Simak sintaks dan contoh berikut.

<select>
    <option value="value1">Pilihan 1</option>
</select>
<form>
    <h3>Pilihan Bulan lahir</h3>
    <select>
        <option value="Jan">Januari</option>
        <option value="Feb">Februari</option>
        <option value="Mar">Maret</option>
        <option value="Apr">April</option>
        <option value="Mei">Mei</option>
        <option value="Jun">Juni</option>
        <option value="Jul">Juli</option>
        <option value="Agu">Agustus</option>
        <option value="Sep">September</option>
        <option value="Okt">Oktober</option>
        <option value="Nov">November</option>
        <option value="Des">Desember</option>
    </select>
</form>

Dan, hasilnya berikut ini

HTML Dasar : Form oprtion

Tag <textarea>

Karakteristik <textarea> sebenarnya sama saja dengan <input rype=”text”>, namun terkhusus untuk <textarea> bisa menampung teks yang lebih banyak dan panjang. Contohnya seperti artikel ini, bisa kita masukkan ke <textarea> tentunya.

Sintaksnya sebagai berikut.

<textarea rows="xx" cols="yy">
   ...... Text Disini ......
</textarea>

Textarea punya dua atribut rows dan cols, yang keduanya digunakan untuk menentukan tinggi dan lebar dari kolom. Isian kedua atribut ini berupa angka.

<textarea cols="30" rows="10">
    Text Disini
</textarea>

Menambahkan Atribut Name

Dalam proses pengiriman data ke file pemroses kita akan memerlukan sebuah pengenal yang unik untuk setiap field yang kita isi. Sebenarnya ada banyak cara sih untuk memberi pengenal ini, salah satunya adalah atribut name dengan value berupa nama dari field.

Untuk penulisan nilai dari atribute name ini biasanya ditulis tanpa spasi. Jadi, misal “last name” maka akan ditulis “lastname”. Sebagai contoh,

<input type="text" name="lastname">

Masih banyak lagi yang harus kita ketahui tentang form dan fieldnya, silahkan perbanyak membaca dan nonton video tutorial..

Azhari Sikumbang

Tulis dan bicarakan, agar lebih berguna. (Github | Linked in)
~ azhari@coretanit.com