Oznaka label

Oznaka label postavlja etiketu za polje za unos tipa input, textarea, select i tako dalje.

Etiketa se povezuje sa određenim poljem za unos pomoću atributa for. U njemu treba navesti vrednost atributa id polja za unos, na koje je etiketa povezana. Takođe, etiketa se povezuje sa elementom ako se taj element stavi unutar oznake label. U ovom slučaju atribut for ne treba navoditi. Pogledajte primeri za bolje razumevanje.

Klikom na etiketu, njoj pridruženi čekboksovi ili radio dugmići će menjati svoje stanje sa označenog na neoznačeno i obrnuto. Etiketa je u ovom slučaju potrebna za udobnost: teško je pogoditi kursorom male elemente forme, a dugu etiketu sa tekstom - mnogo lakše.

Pridruženo etiketi tekstualno polje za unos tipa input i textarea će dobiti fokus unosa. Fokus - je kada kursor treperi u polju za unos, u ovom slučaju, ako nešto pišete na tastaturi - tekst će upasti u ovo polje (vidi pseudoklasu focus za napredno razumevanje fokusa).

Etiketu label može se koristiti za imitaciju čekboksa ili radio dugmeta. Ovo je potrebno kako bi se napravio checkbox ili radio sa sopstvenim dizajnom (što je u CSS-u zabranjeno, ali uz pomoć domišljatih trikova moguće).

Atributi

Atribut	Opis
for	U ovom atributu treba navesti vrednost atributa id onog polja za unos, na koje je povezana etiketa label.
accesskey	Postavlja prečicu na tastaturi, pomoću koje se može preći na element forme pridružen etiketi (preko atributa for). Više detalja vidi u atributu accesskey.

Primer . Čekboks

Hajde da kačeku checkbox povežemo etiketu pomoću atributa for. Pritisnite na etiketu i videćete promenu stanja kačeka sa označenog na neoznačeno i obrnuto:

:

Primer . Unutar label

A sada hajde da ne povežemo etiketu preko atributa for, već da ugnezdimo elemente pravo unutar oznake label, u ovom slučaju pritiskom na tekst label takođe ćemo dovesti do aktivacije elementa:

:

Primer . Tekstualno polje za unos

Hajde da oznaci input povežemo etiketu pomoću atributa for. Klik na etiketu će dovesti do dobijanja fokusa polja za unos. Pored toga, sadržani tekst u polju (koji ćemo dodati pomoću atributa value) biće izabran. Ako počnete nešto da pišete na tastaturi - ovaj tekst će se izbrisati. Možete da se oslobodite izbora, a da pritom ne izbrišete tekst, tako što ćete kliknuti mišem na polje za unos: fokus pri tome neće nestati, a izbor će nestati:

:

Pogledajte takođe