Tagget label

Tagget label angiver en etiket til et inputfelt af typen input, textarea, select og så videre.

Etiketten knyttes til et bestemt inputfelt ved hjælp af attributten for. I den skal man angive værdien af attributten id for det inputfelt, som etiketten er knyttet til. Også kan etiketten knyttes til elementet, hvis dette element placeres inde i tagget label. I dette tilfælde behøver man ikke at angive attributten for. Se eksemplerne for bedre forståelse.

Ved at klikke på etiketten vil de tilknyttede afkrydsningsfelter eller radio knapper ændre deres tilstand fra markeret til umarkeret og omvendt. Etiketten er i dette tilfælde til for at gøre det nemmere: det er svært at ramme små formelementer med markøren, men en lang etiket med tekst er meget lettere at ramme.

Det tilknyttede tekstinputfelt af typen input og textarea vil modtage inputfokus. Fokus - er når markøren blinker i inputfeltet, i dette tilfælde, hvis du skriver noget på tastaturet - vil teksten komme ind i dette felt (se pseudoklassen focus for en avanceret forståelse af fokus).

Etiketten label kan bruges til at efterligne et afkrydsningsfelt eller en radio knap. Dette er nødvendigt for at lave et checkbox eller radio med eget design (hvilket er forbudt med CSS, men med hjælp af smarte tricks er muligt).

Attributter

Attribut	Beskrivelse
for	I denne attribut skal man angive værdien af attributten id for det inputfelt, som etiketten label er knyttet til.
accesskey	Angiver en genvejstast, som kan bruges til at gå til det formelement, der er knyttet til etiketten (gennem attributten for). Se mere i attributten accesskey.

Eksempel . Afkrydsningsfelt

Lad os knytte en etiket til et checkbox vha. attributten for. Klik på etiketten, og du vil se tilstanden af afkrydsningsfeltet skifte fra markeret til umarkeret og omvendt:

:

Eksempel . Inde i label

Lad os nu ikke knytte etiketten gennem attributten for, men lægge elementerne direkte inde i tagget label, i dette tilfælde vil et klik på teksten i label også aktivere elementet:

:

Eksempel . Tekstinputfelt

Lad os knytte en etiket til tagget input vha. attributten for. Et klik på etiketten vil føre til, at inputfeltet modtager fokus. Den tekst, som feltet indeholder (tilføjet vha. attributten value) vil blive markeret. Hvis man begynder at skrive noget på tastaturet - vil denne tekst blive erstattet. For at fjerne markeringen uden at slette teksten, kan man klikke med musen på inputfeltet: fokus forsvinder ikke, men markeringen forsvinder:

:

Se også