Tutorial Form HTML Part 1: Fungsi dan Cara Penggunaan Tag Label HTML
Halo Kawan-kawan,
Pada kesempatan sebelumnya kita telah membahas cara membuat form dengan HTML.
Pada dasarnya HTML memiliki banyak sekali jenis tag dan atribut dan pada kesempatan-kesempatan berikutnya, kita akan belajar lebih dalam tentang tag dan atribut dalam HTML.
Fungsi tag label Dalam Pembuatan Form HTML
Tag label dalam HTML setidaknya memiliki 2 fungsi, yaitu:
1. Pelengkap keterangan untuk beberapa objek form seperti radio atau checkbox.
2. 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:
<!DOCTYPE html>
<html>
<head>
<title>Belajar Tag Label HTML</title>
</head>
<body>
<h4>Keahlian yang harus saya kuasai untuk menjadi web desain: </h4>
<form action="daftar.php" method="post">
<input type="checkbox" name="skillhtml" id="skillhtml"
value="skillhtml"/> Skill HTML
<br />
<input type="checkbox" name="skillcss" id="skillcss"
value="skillcss"/> Skill CSS
<br />
<input type="checkbox" name="skillJavaScript" id="skilljaavascript"
value="skilljavascript"/> Skill Javascrip
</form>
</body>
</html>
Hasil Code:
Ketika kode HTML diatas dijalankan pada web browser, maka akan muncul kotak “cheklist”. Dengan ukuran kotak yang kecil, ini akan menyulitkan pengguna untuk men-klik kotak putih pada checkbox tersebut.
Cara yang dapat dilakukan untuk mempermudah pengguna adalah dengan membuat isian checkbox bisa dilakukan dengan men-klik tulisan keterangan dari checkbox tersebut.
Inilah fungsi dari penggunaan tag label.
Cara Penggunaan tag label HTML
Terdapat 3 cara dalam menggunakan tag label, antara lain:
1. Memasukan atau megurung seluruh tag input checkbox kedalam tag label
Perhatikan Code Berikut:
<label>
<input type="checkbox" name="skillhtml" id="skillhtml"
value="skillhtml"/> Skill HTML
</label>
Dapat diperhatikan pada contoh diatas tag labil diguakan dengan mengurung tag input didalamnya.
Silahkan ubah kode kita sebelumnya, dan tambahkan tag label.
2. Menggunakan atribut “for”.
Perhatikan Code Berikut:
<input type="checkbox" name="skillcss" id="skillcss" value="skillcss"/>
<label for="skillcss"> Skill CSS </label>
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=”skillcss” di dalam tag input checkbox. Sehingga dalam pembuatan labelnya, saya memberikan nilai atribut for=”skillcss”.
3. Menggabungkan kedua cara diatas
Perhatikan Code Berikut:
<label for="skillJavaScript">
<input type="checkbox" name="skilljavascript" id="skilljavascript" value="skilljavascript"/>
Skill Javascrip
</label>
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:
<!DOCTYPE html>
<html>
<head>
<title>Belajar Tag Label HTML</title>
</head>
<body>
<h4>Keahlian yang harus saya kuasai untuk menjadi web desain: </h4>
<form action="daftar.php" method="post">
<label>
<input type="checkbox" name="skillhtml" id="skillhtml"
value="skillhtml"/> Skill HTML
</label>
<br />
<input type="checkbox" name="skillcss" id="skillcss" value="skillcss"/>
<label for="skillcss"> Skill CSS </label>
<br />
<label for="skilljavascript">
<input type="checkbox" name="skilljavascript" id="skilljavascript" value="skilljavascript"/>
Skill Javascrip
</label>
</form>
</body>
</html>
Hasil Code:
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.
(Untuk lebih jelasnya kawan-kawan silakan mencoba sendiri dan menonton penjelasan video diatas)
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.