Tag HTML <label>

Definisi dan penggunaan

<label> Label mendefinisikan label (tanda) untuk elemen input.

Element label tidak akan menampilkan efek khusus apapun kepada pengguna. Namun, ia memperbaiki ketersediaan untuk pengguna mouse. Jika Anda klik teks di dalam elemen label, hal ini akan memicu kontrol. Artinya, ketika pengguna memilih label, peramban akan otomatis memindahkan fokus ke kontrol yang relevan dengan label.

<label> Label Atribut for Harus sama dengan atribut id elemen yang relevan.

<label> Label dapat mendefinisikan label (tanda) untuk beberapa elemen:

Cara penggunaan elemen di atas dengan label yang benar akan berkelanjutan bagi pengguna berikut ini:

  • Pengguna pemilihan layar (ketika pengguna berfokus pada elemen, akan berbaca label)
  • Sulit untuk mengklik area yang sangat kecil (contoh kotak centang) untuk pengguna - karena saat pengguna mengklik <label> Teks di dalam elemen dapat berubah ketika pengguna mengklik (ini meningkatkan area klik)

Lihat Juga:

Panduan Referensi DOM HTML:Objek Label

Contoh

Tiga tombol pilihan 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="Kirim">
</form>

Coba Sendiri

Petunjuk dan Komentar

Petunjuk:<label> Atribut for harus sama dengan atribut id elemen yang relevan untuk mengikatnya bersama-sama. Juga dapat melalui menempatkan elemen di <label> Bind elemen label ke dalam elemen.

Atribut

Atribut Nilai Deskripsi
for ID Elemen Menentukan elemen label diikat ke elemen formulir mana.
form ID Formulir Menentukan field label milik formulir.

Atribut Global

<label> Tanda pengenal masih mendukung Atribut Global di HTML.

Atribut Acara

<label> Tanda pengenal masih mendukung Atribut Acara di HTML.

Pengaturan CSS Standar

Sebagian besar peramban akan menampilkan nilai standar berikut ini <label> Elemen:

label {
  cursor: default;
}

Coba Sendiri

Dukungan Peramban

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Dukungan Dukungan Dukungan Dukungan Dukungan