Tag <label> HTML


Contoh

Tiga tombol radio dengan label:

<form action="/action_page.php">
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label><br><br>
  <input type="submit" value="Submit">
</form>

Definisi dan Penggunaan

Tag <label>mendefinisikan label untuk beberapa elemen:

Penggunaan label yang tepat dengan elemen-elemen di atas akan bermanfaat:

  • Pengguna pembaca layar (akan membacakan label dengan keras, saat pengguna fokus pada elemen)
  • Pengguna yang mengalami kesulitan mengeklik wilayah yang sangat kecil (seperti kotak centang) - karena ketika pengguna mengeklik teks di dalam <label>elemen, itu akan mengaktifkan input (ini meningkatkan area klik). 

Tips dan Catatan

Tip: Atribut for dari <label> harus sama dengan atribut id dari elemen terkait untuk mengikatnya bersama. Label juga dapat diikat ke elemen dengan menempatkan elemen di dalam <label>elemen. 


Dukungan Peramban

Element
<label> Yes Yes Yes Yes Yes


Atribut

Attribute Value Description
for element_id Specifies the id of the form element the label should be bound to
form form_id Specifies which form the label belongs to

Atribut Global

Tag <label>juga mendukung Atribut Global dalam HTML .


Atribut Acara

Tag <label>juga mendukung Atribut Peristiwa dalam HTML .


Halaman Terkait

Referensi DOM HTML: Objek Label


Pengaturan CSS Default

Sebagian besar browser akan menampilkan <label>elemen dengan nilai default berikut:

Contoh

label {
  cursor: default;
}