Taggen label

Taggen label sätter en etikett för ett inmatningsfält av typen input, textarea, select och så vidare.

Etiketten binds till ett specifikt inmatningsfält med hjälp av attributet for. I det skall man ange värdet på attributet id för det inmatningsfält som etiketten är bunden till. Etiketten binds också till elementet om detta element placeras inuti taggen label. I detta fall behöver attributet for inte anges. Se exemplen för bättre förståelse.

Genom att klicka på etiketten kommer de kryssrutorna eller radioknapparna som är bundna till den att ändra sitt tillstånd från ikryssad till oikryssad och vice versa. Etiketten behövs i detta fall för bekvämlighet: det är svårt att träffa små formulärelement med musen, men en lång etikett med text är betydligt lättare att klicka på.

Det textinmatningsfält som är bundet till etiketten av typen input och textarea kommer att få inmatningsfokus. Fokus - är när markören blinkar i inmatningsfältet, i detta fall, om du skriver något på tangentbordet - kommer texten hamna i detta fält (se pseudoklassen focus för en avancerad förståelse av fokus).

Etiketten label kan användas för att imitera en kryssruta eller radioknapp. Detta behövs för att skapa en checkbox eller radio med en egen design (vilket är förbjudet i CSS, men med hjälp av knepiga metoder är möjligt).

Attribut

Attribut	Beskrivning
for	I detta attribut ska man ange värdet på attributet id för det inmatningsfält som etiketten label är bunden till.
accesskey	Sätter en snabbknapp med vilken man kan gå till det formulärelement som är bundet till etiketten (genom attributet for). Se mer i attributet accesskey.

Exempel . Kryssruta

Låt oss binda en etikett till en checkbox med hjälp av attributet for. Klicka på etiketten och du kommer att se kryssrutans tillstånd ändras från ikryssad till oikryssad och vice versa:

:

Exempel . Inuti label

Och låt oss nu inte binda etiketten genom attributet for, utan placera elementen direkt inuti taggen label, i detta fall kommer ett klick på texten i label också leda till aktivering av elementet:

:

Exempel . Textinmatningsfält

Låt oss binda en etikett till taggen input med hjälp av attributet for. Ett klick på etiketten kommer att leda till att inmatningsfältet får fokus. Texten som finns i fältet (vi lägger till den med attributet value) kommer att bli markerad. Om du börjar skriva något på tangentbordet - kommer denna text att raderas. För att bli av med markeringen utan att radera texten kan man klicka med musen på inmatningsfältet: fokus försvinner inte då, men markeringen försvinner:

:

Se även