Cara Pemakaian dan Fungsi Tag Label HTML

belajar HTML dan CSS untuk pemula

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

Fungsi tag label Dalam Pembuatan Form HTML

Tag label dalam HTML berguna sebagai pelengkap keterangan untuk beberapa objek form seperti radio atau checkbox. Selain memberikan keterangan, tag label juga mempermudah penggunan dalam memasukkkan data (membuat form jadi user friendly).

Secara tampilan, tag label tidak akan berdampak apa-apa di dalam form (kecuali kamu mengubahnya memakai CSS). Sehingga tanpa atau dengan tag label, kamu tak akan melihat perbedaannya.

Untuk mengetahui kegunaan tag label, silahkan jalankan contoh kode form HTML 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 belajar HTML
<br />
<input type="checkbox" name="belajarcss" id="belajarcss" 
value="belajarcss"/> Saya belajar CSS
<br />
<input type="checkbox" name="infanthree" id="infanthree" 
value="infanthree"/> Saya belajar pemograman di Infanthree
</form>
</body>
</html>

Dari contoh kode form diatas, saya membuat 3 isian checkbox sederhana. Saat kita “mencheklist” salah satu dari checkbox itu, cara yang amat banyak dipakai yaitu dengan men-klik kotak putih pada checkbox itu.

Tetapi kotak checkbox itu lumayan kecil, dan akan sedikit menyusahkan untuk mengklik-nya.

Salah satu cara supaya lebih gampang buat kita (dan juga bagi pemakai) untuk memilih checkbox itu ialah bila pengisian checkbox dapat dilakukan dengan men-klik tulisan keterangan dari checkbox itu.

Untuk kebutuhan inilah tag label dipakai.

Cara Pemakaian tag label HTML

Terdapat 3 cara pemakaian tag label. Cara pertama dan juga paling sederhana yaitu 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 belajar HTML
</label>

Dengan memasukkan semua tag input checkbox dan keterangannya ke dalam tag label, maka kita dapat men-klik tulisan keterangan dari checkbox, dan dengan otomatis checkbox itu akan terisi.

Silahkan kamu langsung merubah kode kita sebelumnya, dan tambahkan tag label.

Cara kedua untuk memakai tag label ialah memakai atribut “for”. Dengan memakai atribut for ini, maka kita tidak mesti memasukkan semua 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 ditaruh sesudah tag input checkbox. Di dalam tag label ini ada sebuah atribut for, yang nilainya ialah id dari tag input. Didalam contoh ini saya membuat atribut id=”belajarcss” di dalam tag input checkbox.  Sehingga pada pembuatan labelnya, saya memberikan nilai atribut  for=”belajarcss”.

Cara ketiga untuk pemakaian tag label yaitu dengan menggabungkan kedua cara diatas. Perhatikan contoh berikut:

<label for="infanthree">
<input type="checkbox" name="infanthree" id="infanthree" value="infanthree"/>
Saya sedang belajar pemograman di Infanthree
</label>

Di pada contoh itu saya menggabungkan pemakaian atribut for untuk tag label, tetapi juga “mengurung” tag input checkbox dengan tag label.

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

<!DOCTYPE html>
<html>
<head>
<title>Belajar Tag Label HTML</title>
</head>
<body>
<h4>Jadwal kegiatan saya: </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 belajar CSS</label>
<br />
<label for="infanthree" >
<input type="checkbox" name="infanthree" id="infanthree" 
value="infanthree"/> Saya sedang belajar pemograman di Infanthree
</label>
</form>
</body>
</html>

Silahkan kamu mencoba menjalankan kode itu, dan bila kamu men-klik tulisan keterangan dari checkbox, maka secara langsung kotak checkbox akan berisi. Hal semacam ini bakal lebih mempermudah user dalam mengisi form yang kita rancang.

Di pada beberapa referensi, kamu dianjurkan memakai cara penulisan tag label yang kedua, yaitu dimana kita memisahkan tag label dari tag input, dan memakai atribut for sebagai “pengikat” label. Dengan metode ini, form bakal lebih fleksibel.

Demikian tutorial kita saat ini terkait Fungsi dan Cara Pemakaian Tag Label dalam pembuatan form HTML. Memakai tag label untuk merancang form akan mempermudah user dalam mengisi form yang dibuat.

Selanjutnya dalam tutorial form HTML, saya akan membicarakan mengenai fungsi dan cara pemakaian tag fieldset dan tag legend untuk mengelompokkan objek form.


Butuh Web Developer Makassar atau Jasa SEO di Makassar yang bergaransi? Jangan ragu dengan infanthree.com. Kami juga penyedia Jasa Pembuatan Aplikasi Android di Makassar yang terkemuka. Selain itu ada layanan SEM, SMM, Internet Marketing Agency Makassar dan Social Media, Pembuatan Logo, Konten, Video, Maskot dan Instalasi jaringan ataupun mikrotik, hingga pelatihan komputer dan internet marketing.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *