Znacznik label

Znacznik label definiuje etykietę dla pola wprowadzania takiego jak input, textarea, select i tak dalej.

Etykieta jest powiązana z określonym polem wprowadzania za pomocą atrybutu for. Należy w nim podać wartość atrybutu id pola wprowadzania, z którym jest powiązana etykieta. Etykieta jest również powiązana z elementem, jeśli ten element umieścimy wewnątrz znacznika label. W tym przypadku nie trzeba podawać atrybutu for. Zobacz przykłady dla lepszego zrozumienia.

Kliknięcie etykiety spowoduje zmianę stanu powiązanych z nią pól wyboru lub przycisków opcji z zaznaczonego na niezaznaczone i na odwrót. Etykieta jest w tym przypadku potrzebna dla wygody: trudno trafić kursorem w małe elementy formularza, a w długą etykietę z tekstem - znacznie łatwiej.

Powiązane z etykietą pole tekstowe takie jak input lub textarea będzie otrzymywać fokus. Fokus - to gdy kursor miga w polu wprowadzania, w tym przypadku, jeśli będziesz coś pisać na klawiaturze - tekst trafi do tego pola (patrz pseudoklasa focus dla zaawansowanego zrozumienia fokusu).

Etykiety label można użyć do symulacji pola wyboru lub przycisku opcji. Jest to potrzebne, aby stworzyć checkbox lub radio z własnym designem (co w CSS jest zabronione, ale za pomocą sprytnych sztuczek możliwe).

Atrybuty

Atrybut	Opis
for	W tym atrybucie należy podać wartość atrybutu id tego pola wprowadzania, z którym powiązana jest etykieta label.
accesskey	Definiuje klawisz skrótu, za pomocą którego można przejść do powiązanego z etykietą (przez atrybut for) elementu formularza. Więcej informacji patrz atrybut accesskey.

Przykład . Pole wyboru

Przywiążmy etykietę do pola wyboru checkbox za pomocą atrybutu for. Klikaj na etykietę a zobaczysz zmianę stanu pola wyboru z zaznaczonego na niezaznaczone i na odwrót:

:

Przykład . Wewnątrz label

A teraz nie przywiązujmy etykiety przez atrybut for, a włóżmy elementy bezpośrednio do znacznika label, w tym przypadku kliknięcie na tekst label również będzie prowadzić do aktywacji elementu:

:

Przykład . Pole tekstowe

Przywiążmy etykietę do znacznika input za pomocą atrybutu for. Kliknięcie etykiety spowoduje uzyskanie fokusu przez pole wprowadzania. Jednocześnie zawartość pola (dodana za pomocą atrybutu value) zostanie zaznaczona. Jeśli zaczniesz cokolwiek pisać na klawiaturze - ten tekst zostanie zastąpiony. Można pozbyć się zaznaczenia, nie usuwając przy tym tekstu, klikając myszką w pole wprowadzania: fokus wtedy nie zniknie, a zaznaczenie zniknie:

:

Zobacz też