Tutorial Form HTML Part 1: Fungsi dan Cara Penggunaan Tag Label HTML

Tag pertama yang akan kita pelajari dalam Tutorial Form HTML ini adalah tentang fungsi dan cara penggunaan tag label.

Fungsi tag label Dalam Pembuatan Form HTML

Tag label dalam HTML berfungsi sebagai pelengkap keterangan untuk beberapa objek form seperti radio atau checkbox. Selain memberikan keterangan, tag label juga memudahkan penggunan dalam memasukkkan data (membuat form menjadi user friendly).
Secara tampilan, tag label tidak akan berpengaruh apa-apa di dalam form (kecuali anda mengubahnya menggunakan CSS). Sehingga tanpa atau dengan tag label, anda tidak akan melihat perbedaannya.

Untuk memahami kegunaan tag label, silahkan jalankan contoh kode form HTML berikut ini:

Dari contoh kode form HTML diatas, saya membuat 3 isian checkbox sederhana. Ketika kita “mencheklist” salah satu dari checkbox tersebut, cara yang paling banyak digunakan adalah dengan men-klik kotak putih pada checkbox tersebut.

Namun kotak checkbox tersebut cukup kecil, dan akan sedikit menyulitkan untuk mengklik-nya.

Salah satu cara agar lebih mudah bagi kita (dan juga bagi pengguna) untuk memilih checkbox tersebut adalah jika pengisian checkbox bisa dilakukan dengan men-klik tulisan keterangan dari checkbox tersebut.

Untuk keperluan inilah tag label digunakan.

Cara Penggunaan tag label HTML

Terdapat 3 cara penggunaan tag label. Cara pertama dan juga paling sederhana adalah dengan memasukkan atau “mengurung” seluruh tag input checkbox kedalam tag label seperti kode berikut ini:

Dengan memasukkan seluruh tag input checkbox dan keterangannya ke dalam tag label, maka kita bisa men-klik tulisan keterangan dari checkbox, dan secara otomatis checkbox tersebut akan terisi.
Silahkan anda langsung mengubah kode kita sebelumnya, dan tambahkan tag label.

Cara kedua untuk menggunakan tag label adalah menggunakan atribut “for”. Dengan menggunakan atribut for ini, maka kita tidak harus memasukkan seluruh tag input ke dalam tag label. Berikut contoh penggunaannya:

Perhatikan bahwa tag label diletakkan setelah tag input checkbox. Di dalam tag label ini terdapat sebuah atribut for, yang nilainya adalah id dari tag input. Didalam contoh ini saya membuat atribut id=”belajarcss” di dalam tag input checkbox.  Sehingga dalam pembuatan labelnya, saya memberikan nilai atribut  for=”belajarcss”.

Cara ketiga untuk penggunaan tag label adalah dengan menggabungkan kedua cara diatas. Perhatikan contoh berikut:

Di dalam contoh tersebut saya menggabungkan penggunaan atribut for untuk tag label, namun juga “mengurung” tag input checkbox dengan tag label.

Sebagai contoh utuh dari form kita, berikut adalah contoh form sebelumnya dengan tambahan tag label:

Silahkan anda mencoba menjalankan kode tersebut, dan jika anda men-klik tulisan keterangan dari checkbox, maka secara langsung kotak checkbox akan berisi. Hal seperti ini akan lebih memudahkan user dalam mengisi form yang kita rancang.
Di dalam beberapa referensi, anda disarankan menggunakan cara penulisan tag label yang kedua, yakni dimana kita memisahkan tag label dari tag input, dan menggunakan atribut for sebagai “pengikat” label. Dengan cara ini, form akan lebih fleksibel.

---

Demikian tutorial kita kali ini mengenai Fungsi dan Cara Penggunaan Tag Label dalam pembuatan form HTML. Menggunakan tag label untuk merancang form akan memudahkan user dalam mengisi form yang dibuat.
Berikutnya dalam tutorial form HTML, saya akan membahas tentang fungsi dan cara penggunaan tag fieldset dan tag legend untuk mengelompokkan objek form.

Silahkan anda mencoba menjalankan kode tersebut, dan jika anda men-klik tulisan keterangan dari checkbox, maka secara langsung kotak checkbox akan berisi. Hal seperti ini akan lebih memudahkan user dalam mengisi form yang kita rancang.

Di dalam beberapa referensi, anda disarankan menggunakan cara penulisan tag label yang kedua, yakni dimana kita memisahkan tag label dari tag input, dan menggunakan atribut for sebagai “pengikat” label. Dengan cara ini, form akan lebih fleksibel.