Ce face <label>
Tagul <label> reprezintă eticheta descriptivă a unui câmp de introducere. Asocierea se face prin atributul for din label, care trebuie să fie identic cu atributul id al câmpului țintă.
Beneficiu major de uzabilitate: când dai clic pe textul unui <label>, browserul mută automat cursorul în câmpul de text sau bifează căsuța checkbox asociată. Acest lucru mărește suprafața de clic, fiind extrem de util pe ecranele tactile ale telefoanelor.
În plus, cititoarele de ecran citesc eticheta atunci când utilizatorul nevăzător navighează în câmpul respectiv.
Atribute
| Atribut | Descriere |
|---|---|
for |
ID-ul câmpului de formular la care se referă această etichetă. |
Exemple
Exemplul 1: Etichetă asociată unui checkbox pentru clic ușor
Dacă apeși pe cuvântul „Salvează”, căsuța se bifează instantaneu.
<input type="checkbox" id="tine-minte">
<label for="tine-minte">Salvează datele mele pe acest dispozitiv</label>Ce afișează browserul
[x] Salvează datele mele pe acest dispozitiv (clicul oriunde pe text bifează căsuța)Greșeli frecvente
- Scrierea de text simplu lângă un input fără tagul
- Greșeli de scriere între valoarea atributului for din label și atributul id din input.
Comenzi înrudite
<input>: Cel mai versatil element de formular: își schimbă complet aspectul și funcția în funcție de atributul type.<form>: Containerul principal pentru colectarea datelor de la utilizator și trimiterea lor către un server.<select> și <option>: Creează un meniu derulant (drop-down list) de unde utilizatorul alege una sau mai multe opțiuni.<textarea>: Zonă de introducere a textului pe mai multe rânduri (multiline text box), cu redimensionare automată în browser.