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:

<!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="duniailkom" id="duniailkom" 
   value="duniailkom"/> Saya sedang belajar pemograman di Duniailkom

   </form>
</body>
</html>

Tutorial Pembuatan Form HTML - Contoh Penggunaan Tag LabelDari 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:

<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="duniailkom">
 <input type="checkbox" name="duniailkom" id="duniailkom" value="duniailkom"/>
 Saya sedang belajar pemograman di Duniailkom
</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="duniailkom" id="duniailkom" 
      value="duniailkom"/> Saya sedang belajar pemograman di Duniailkom
   </label>

   </form>
</body>
</html>

Tutorial Pembuatan Form HTML - Contoh Penggunaan Tag Label 2Silahkan 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.

21 Comments

  1. Anonymous
    10 Jan 15
    • Andre
      13 Jan 15
  2. rangga
    03 Mar 15
    • Andre
      03 Mar 15
  3. marco
    10 Aug 15
    • Andre
      21 May 16
    • Andre
      20 May 16
  4. Andie Rahmatdiansyah
    19 May 16
  5. bobyzulfikar
    23 May 16
    • Andre
      26 May 16
  6. Anonymous
    11 Jun 16
  7. Ditt Clev
    11 Jul 16
  8. Thomas Aidzil Pratama
    26 May 18
    • Andre
      28 May 18
    • Andre
      14 Jan 19
  9. Bayu Pradana
    29 Apr 20
  10. Suryo Adhy Chandra
    12 Sep 22

Add Comment

Leave a Reply to Ditt Clev Cancel reply