Form HTML Tutorial 1: Fungsi dan Cara Penggunaan Tag Label

0
17

Fungsi tag label Dalam Pembuatan Form HTML

Tag label dalam HTML berfungsi sebagai pelengkap keterangan untuk beberapa objek formseperti 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:

<!DOCTYPE html>
<html>
<head>
   <title>Belajar Tag Label HTML</title>
</head>
 
<body> 
   <h4>Jadwal kegiatan saya sekarang: </h4>
 
   <form action="daftar.php" method="post">
 
   <input type="checkbox" name="belajarhtml" id="belajarhtml"
   value="belajarhtml"/> Saya sedang belajar HTML
   <br />
 
   <input type="checkbox" name="belajarcss" id="belajarcss"
   value="belajarcss"/> Saya sedang belajar CSS
   <br />
 
   <input type="checkbox" name="gurukomputer" id="gurukomputer"
   value="gurukomputer"/> Saya sedang belajar pemograman
 
   </form>
</body>
</html>

tag label, gurukomputer.com, welovebet.com

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 labelCara pertama dan juga paling sederhana adalah dengan memasukkan atau “mengurung” seluruh tag input checkbox kedalam tag label seperti kode berikut ini:

<label>
   <input type="checkbox" name="belajarhtml" id="belajarhtml"
   value="belajarhtml"/>Saya sedang belajar HTML
</label>

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:

<input type="checkbox" name="belajarcss" id="belajarcss" value="belajarcss"/>
<label for="belajarcss">Saya sedang belajar 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=”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:

<label for="gurukomputer">
 <input type="checkbox" name="gurukomputer" id="gurukomputer" value="gurukomputer"/>
 Saya sedang belajar pemograman
</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>Jadwal kegiatan saya sekarang: </h4>
 
   <form action="daftar.php" method="post">
 
   <label>
      <input type="checkbox" name="belajarhtml" id="belajarhtml"
      value="belajarhtml"/> Saya sedang belajar HTML
   </label>
   <br />
 
   <input type="checkbox" name="belajarcss" id="belajarcss"
   value="belajarcss"/>
   <label for="belajarcss"> Saya sedang belajar CSS</label>
   <br />
 
   <label for="duniailkom" >
      <input type="checkbox" name="gurukomputer" id="gurukomputer"
      value="gurukomputer"/> Saya sedang belajar pemograman
   </label>
 
   </form>
</body>
</html>

Tag Label, gurukomputer.com, welovebet.com
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 forsebagai “pengikat” label. Dengan cara ini, form akan lebih fleksibel.

 

LEAVE A REPLY

Please enter your comment!
Please enter your name here