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:
- <input type="kotak centang">
- <input type="warna">
- <input type="tanggal">
- <input type="datetime-local">
- <input type="email">
- <input type="file">
- <input type="bulan">
- <input type="nomor">
- <input type="password">
- <input type="radio">
- <input type="rentang">
- <input type="search">
- <input type="tel">
- <input type="teks">
- <input type="waktu">
- <input type="url">
- <input type="minggu">
- <meter>
- <kemajuan>
- <pilih>
- <textarea>
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;
}