Brug af labels for bedre tilgængelighed i formularer
Stryg for at vise menuen
Elementet <label> bruges til at knytte en etiket til et inputfelt i en formular. Denne tilknytning hjælper brugere med at forstå, hvilke oplysninger der efterspørges i formularfeltet. Når en bruger klikker på etiketten, fokuseres der automatisk på det tilsvarende inputfelt.
Der er to måder at forbinde label- og input-elementer på:
Indlejring
Du kan placere et <input>-element inde i et <label>, og browseren vil automatisk forbinde dem.
index.html
Når der klikkes på "Navn", fokuseres inputfeltet.
Brug af id-attributten
Hvis inputfeltet ikke kan placeres inde i labelen, forbind dem manuelt:
index.html
Her bruger labelen for="name" og inputfeltet bruger id="name". Matchende værdier skaber forbindelsen.
Ved at bruge disse metoder etableres en visuel og semantisk forbindelse mellem label og input-feltet. Der kan dog opstå situationer, hvor det ikke er muligt at indkapsle input-elementet i label på grund af stilbegrænsninger eller websidens logik. I sådanne tilfælde benyttes ofte attributforbindelser for at bevare fleksibiliteten i anvendelsen af stilarter og implementeringen af bagvedliggende logik.
Lad os undersøge forskellen mellem de to tilgange ved at se på koden i billedet.
Fra browserens synspunkt er den valgte metode til at etablere forbindelsen uden betydning. Begge metoder opnår det samme resultat ved at forbinde label og inputfelt for forbedret brugervenlighed og tilgængelighed.
Tak for dine kommentarer!
Spørg AI
Spørg AI
Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat
