Tanda <label> HTML

Definisi dan penggunaan

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

Elemen label tidak akan memaparkan sebarang kesan khas kepada pengguna. Walau bagaimanapun, ia mempertingkatkan kegunaan untuk pengguna mouse. Jika anda mengklik teks di dalam elemen label, akan diaktifkan perekod ini. Ini bermakna, ketika pengguna memilih tajuk ini, pelayar akan secara automatik membawa fokus kepada kawasan kuasa yang relevan dengan tajuk.

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

<label> Label boleh didefinisikan tajuk (tanda) untuk banyak elemen:

Cara yang betul untuk menggunakan elemen di atas dengan label akan memberikan manfaat kepada pengguna berikut:

  • Pengguna pereka baca skrin (ketika pengguna fokus di atas elemen, akan baca tajuk)
  • tidak dapat dicapai dengan mudah kawasan yang kecil (seperti kotak centang) - kerana apabila pengguna mengklik <label> Pengguna yang sukar untuk mengklik kawasan yang kecil (contohnya kotak centang) - kerana apabila pengguna mengklik

Lihat juga:

Panduan Rujukan DOM HTML:Objek Label

Contoh

Tiga pilihan isian tunggal 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="Hantar">
</form>

Cuba sendiri

Petikan dan Komentar

Petikan:<label> Properti for mesti sama dengan properti id elemen yang relevan untuk mengikatnya bersama-sama. Juga boleh melalui meletakkan elemen dalam <label> Bind tag ke dalam elemen.

Properti

Properti Nilai Deskripsi
for ID elemen Menentukan elemen mana yang diikat kepada elemen formulir.
form ID formulir Menentukan medan label milik formulir.

Properti global

<label> Tanda ini juga mendukung Properti global HTML.

Properti acara

<label> Tanda ini juga mendukung Properti acara HTML.

Pengaturan CSS lalai

Bersamaan dengan nilai lalai yang digunakan oleh kebanyakan pereka untuk paparan berikut: <label> Elemen:

label {
  cursor: default;
}

Cuba sendiri

Dukungan pereka

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