<label>. Gue sering pake itu waktu belajar PHP. Gak tau buat apa. Tapi di banyak tutorial ini dipake melulu di dalem form. Biasanya sebelum <input> atau <textarea> atau elemen-elemen form lainnya. Gue bodo amat waktu itu, yang penting program gue jalan.

Terus gue bertanya-tanya pada akhirnya. Kenapa harus pake <label> doang ya untuk ngelabelin elemen form? Kan bisa pake <p> aja gitu kalau sekedar teks doang mah. Gitu fikirku. Tapi terus gue mikir lagi, pasti ini ada alesannya. Gak mungkin dong ya kan, si pembuat html ini iseng aja gitu ngasih tag biar beda. Biar edgy. Gak mungkin kayaknya.

Ya emang gak mungkin dong Bambanx!

The Usage

Nah, emang da si <label> ini bakalan berguna jika disandingkan dengan elemen yang lain. Kalau berdiri sendiri mah bakal nyetak teks doang di layar. Gak guna dong. Mending pake <p> aja sekalian kalau gitu mah, semantiknya jelas.

Contohnya gini, disandingin sama <input> yang ada di dalem <form>:

<form>
 <label for="nama-pengguna">Nama Pengguna</label><br>
 <input name="nama-pengguna" id="nama-pengguna">
</form>

Nah, si <label> ini untuk elemen yang mana? Nah, atribut for diperlukan untuk mencocokkan label ke suatu elemen. Value dari for harus sama dengan id si elemen yang dituju. Perhatikan itu for dan id pada contoh di atas value-nya sama. Kok itu name juga value-nya sama? Ya biar gak ribet aja.

Terus, apa gunanya bangsaaaaaat?

Ok.
Pertama, semantiknya bagus.
Kedua, memperluas hit area. Misal, dalam checkbox, ketika label di hit, checkbox bakal ke-check juga. Jadinya, lo bisa bikin teks-nya buat checkbox itu teh pake label.

<input type="checkbox" id="pet1" name="pet1" value="Kocheng">
<label for="pet1"> Kocheng</label>

Ketiga, ini berguna untuk membantu user yang pake screen reader - mereka yang blind misalnya, karena labelnya bakal dibaca ketika user fokus ke suatu elemen.

Nah, gitu bos. So, jangan ragu untuk pake <label> lagi ya gaesssss!