Eticheta label

Eticheta label definește un marcaj pentru câmpul de introducere de tipul input, textarea, select și așa mai departe.

Marcajul este asociat unui anumit câmp de introducere cu ajutorul atributului for. În acesta trebuie indicată valoarea atributului id câmpului de introducere, căruia i se asociază marcajul. De asemenea, marcajul este asociat elementului, dacă acest element este plasat în interiorul etichetei label. În acest caz, atributul for nu trebuie indicat. Vedeți exemplele pentru o mai bună înțelegere.

La apăsarea pe marcaj, elementele asociate acesteia, cum ar fi casetele de bifare sau butoanele radio își vor schimba starea de la bifat la nebifat și invers. Marcajul în acest caz este necesar pentru comoditate: este greu să lovești cu cursorul elemente mici ale formularului, însă un marcaj lung cu text - este mult mai ușor.

Câmpul de introducere text asociat marcajului de tipul input și textarea va primi focusul de introducere. Focusul - este atunci când cursorul clipește în câmpul de introducere, în acest caz, dacă veți scrie ceva pe tastatură - textul va ajunge în acest câmp (vezi pseudoclassa focus pentru o înțelegere avansată a focusului).

Marcajul label poate fi folosit pentru a simula casetă de bifare sau buton radio. Acest lucru este necesar pentru a face checkbox sau radio cu propriul design (ceea ce în CSS este interzis, dar cu ajutorul unor trucuri este posibil).

Atribute

Atribut	Descriere
for	În acest atribut trebuie indicată valoarea atributului id acelui câmp de introducere, căruia i se asociază marcajul label.
accesskey	Definește o tastă rapidă, cu ajutorul căreia se poate trece la elementul formularului asociat marcajului (prin atributul for). Pentru mai multe detalii, vezi atributul accesskey.

Exemplu . Caseta de bifare

Să asociem la caseta de bifare checkbox un marcaj cu ajutorul atributului for. Apăsați pe marcaj și veți vedea schimbarea stării casetei de bifare de la bifată la nebifată și invers:

:

Exemplu . În interiorul label

Iar acum să nu asociem marcajul prin atributul for, ci să plasăm elementele direct în eticheta label, în acest caz apăsând pe textul label vom duce tot la activarea elementului:

:

Exemplu . Câmp text de introducere

Să asociem etichetei input un marcaj cu ajutorul atributului for. Apăsarea pe marcaj va duce la obținerea focusului de către câmpul de introducere. În acest moment, textul conținut în câmp (îl vom adăuga cu ajutorul atributului value) va deveni selectat. Dacă începeți să scrieți ceva pe tastatură - acest text va fi șters. Vă puteți debarasa de selecție, fără a șterge textul, putând face clic cu mouse-ul în câmpul de introducere: focusul în acest caz nu va dispărea, iar selecția va dispărea:

:

Vezi și