A <label> gives a form control an accessible name and a larger click target. There are two ways to associate them, and doing so is essential for accessibility.
Kaedah 1: for + id (eksplisit)
html
Email address
A <label> gives a form control an accessible name and a larger click target. There are two ways to associate them, and doing so is essential for accessibility.
for + id (eksplisit)Email address
Label for sepadan dengan input id. Ini berfungsi walaupun mereka tidak bersebelahan dalam markup.
<label>
Email address
<input type="email" />
</label>
Input bersarang di dalam label — tidak perlu id.
<label><input type="checkbox" /> I agree to the terms</label>
<!-- clicking the text toggles the checkbox -->
<input placeholder="Email" /> <!-- ❌ disappears on typing, poor contrast, not a label -->
A placeholder hilang apabila pengguna menaip dan tidak diumumkan dengan dapat dipercayai — jangan sekali-kali gunakannya sebagai satu-satunya label.
<input type="search" aria-label="Search products" /> <!-- accessible name, no visible label -->
Gunakan aria-label (atau aria-labelledby) hanya apabila label yang kelihatan benar-benar tidak mungkin.
Label yang dikaitkan dengan betul adalah salah satu amalan kebolehaksesan paling berdampak untuk borang — mereka memberikan setiap kawalan nama untuk teknologi bantuan dan membesarkan sasaran klik untuk semua orang.
Lebih suka <label> sebenar; kembali ke aria-label hanya jika perlu, dan jangan sekali-kali bergantung kepada placeholder sebagai label.
Pustaka soalan temu duga IT dengan jawapan terperinci — daripada Junior hingga Senior.
Derma