Elementet <label> bruges til at forbinde en etiket med et inputfelt i en formular. Denne forbindelse hjælper brugerne med at forstå de oplysninger, der anmodes om i formularfeltet. Når en bruger klikker på etiketten, fokuserer den automatisk på det tilsvarende inputfelt.

Der er to måder at forbinde etiket- og inputelementer på:

Indpakning

Ved at indlejre et form-element, såsom et <input/> felt, inden i et <label> element, etablerer browseren automatisk en forbindelse mellem etiketten og inputfeltet. For eksempel:

I dette eksempel vil klik på etiket-teksten "Name" automatisk fokusere på det tilsvarende inputfelt.

Brug af id-attributten

Når et form-element ikke er indlejret i et <label>-element, forbinder du dem manuelt ved at bruge id-attributten på input-elementet og for-attributten på label. Værdien af for-attributten og id-attributten skal være den samme. For eksempel:

I dette tilfælde er etiketten forbundet med inputfeltet ved hjælp af for-attributten på etiketten og id-attributten på inputfeltet. Klik på etiket-teksten "Name" vil også fokusere på det tilsvarende inputfelt.

Note

Ved at bruge disse metoder etablerer du en visuel og semantisk forbindelse mellem label og input-feltet. Der kan dog være situationer, hvor det er umuligt at indpakke input-elementet i label på grund af stylingbegrænsninger eller websitets logik. I sådanne tilfælde stoler du ofte på attributforbindelser for at opretholde fleksibilitet i anvendelse af stilarter og implementering af baggrundslogik.

Lad os undersøge forskellen mellem de to tilgange ved at se på koden i billedet.

Bemærk

Fra browserens perspektiv er den valgte tilgang til at etablere forbindelsen uden betydning. Begge metoder opnår det samme resultat med at forbinde etiketten og inputfeltet for forbedret brugervenlighed og tilgængelighed.