cloud-hosting-terbaik-indonesia

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

Posted on

Tag pertama-tama yang akan kita pelajari pada Panduan Form HTML ini ialah mengenai fungsi dan cara penggunaan tag label.


Kegunaan tag label Pada Perancangan Form HTML

Tag label pada HTML berfungsi selaku pelengkap keterangan bagi beberapa objek form seperti radio atau checkbox. Selain memberikan keterangan, tag label pun mempermudah penggunan pada memasukkkan data (membangun form menjadi user friendly).

Secara tampilan, tag label tak akan berpengaruh apa-apa di pada form (kecuali sahabat mengubahnya menggunakan CSS). Sehingga tanpa atau dengan tag label, sahabat tak akan melihat perbedaannya.

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

 Dari contoh kode form HTML diatas, saya membangun 3 isian checkbox sederhana. Ketika kita “mencheklist” diantara dari checkbox tersebut, cara yang sangat banyak digunakan ialah dengan men-klik kotak putih di checkbox tersebut.

Namun kotak checkbox tersebut lumayan kecil, dan akan sedikit menyulitkan bagi mengklik-nya.

Diantara cara agar lebih gampang untuk kita (dan pun untuk pengguna) bagi memilih checkbox tersebut ialah kalau penginputan checkbox dapat dilakukan dengan men-klik tulisan keterangan dari checkbox tersebut.

Bagi kebutuhan inilah tag label digunakan.


Cara Pemakaian tag label HTML

Terdapat 3 cara pemakaian tag label. Cara pertama-tama dan pun sangat sederhana ialah dengan memasukkan atau “mengurung” seluruh tag input checkbox kedalam tag label seperti kode berikut ini:

Dengan memasukkan seluruh tag input checkbox dan keterangannya ke pada tag label, karenanya kita dapat men-klik tulisan keterangan dari checkbox, dan secara otomatis checkbox tersebut akan terisi.

Silahkan sahabat seketika mengubah kode kita sebelumnya, dan tambahkan tag label.

Cara kedua bagi menggunakan tag label ialah menggunakan atributfor”. Dengan menggunakan atribut for ini, karenanya kita tak mesti memasukkan seluruh tag input ke pada tag label. Berikut contoh penggunaannya:

Perhatikan bahwa tag label diletakkan setelah tag input checkbox. Di pada tag label ini terdapat sebuah atribut for, yang nilainya ialah id dari tag input. Didalam contoh ini saya membangun atribut id=”belajarcss” di pada tag input checkbox.  Sehingga pada perancangan labelnya, saya memberikan nilai atribut  for=”belajarcss”.

Cara ketiga bagi pemakaian tag label ialah dengan menggabungkan kedua cara diatas. Perhatikan contoh berikut:

Di pada contoh tersebut saya menggabungkan pemakaian atribut for bagi tag label, namun pun “mengurung” tag input checkbox dengan tag label.

Selaku contoh utuh dari form kita, berikut ialah contoh form sebelumnya dengan tambahan tag label:

 Silahkan sahabat mencoba menjalankan kode tersebut, dan kalau sahabat men-klik tulisan keterangan dari checkbox, karenanya secara seketika kotak checkbox akan berisi. Hal seperti ini akan lebih mempermudah user pada mengisi form yang kita rancang.

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


Demikian panduan kita kali ini mengenai Fungsi dan Cara Penggunaan Tag Label pada perancangan form HTML. Menggunakan tag label bagi menyusun form akan mempermudah user pada mengisi form yang dibangun.

Berikutnya pada panduan form HTML, saya akan membahas mengenai fungsi dan cara penggunaan tag fieldset dan tag legend bagi mengelompokkan objek form.


Sumber https://www.duniailkom.com/