Bruk av etiketter for bedre tilgjengelighet i skjemaer
Sveip for å vise menyen
<label>-elementet brukes til å knytte en etikett til et inndatafelt i et skjema. Denne tilknytningen hjelper brukere å forstå hvilken informasjon som skal fylles inn i feltet. Når en bruker klikker på etiketten, vil det tilhørende inndatafeltet automatisk få fokus.
Det finnes to måter å koble sammen label- og input-elementer på:
Innpakking
Du kan plassere et <input>-element inne i et <label>, og nettleseren vil automatisk koble dem sammen.
index.html
Ved å klikke på "Name" får inndatafeltet fokus.
Bruk av id-attributtet
Hvis inndatafeltet ikke kan plasseres inne i etiketten, koble dem manuelt:
index.html
Her bruker etiketten for="name" og inndatafeltet bruker id="name". Samsvarende verdier oppretter koblingen.
Ved å bruke disse metodene etablerer du en visuell og semantisk kobling mellom label og input-feltet. Det kan imidlertid oppstå situasjoner der det ikke er mulig å pakke inn input-elementet i label på grunn av stilbegrensninger eller nettsidens logikk. I slike tilfeller benyttes ofte attributtkoblinger for å opprettholde fleksibilitet ved bruk av stilark og implementering av bakgrunnslogikk.
La oss se på forskjellen mellom de to tilnærmingene ved å undersøke koden i bildet.
Fra nettleserens perspektiv er det uten betydning hvilken metode som brukes for å etablere forbindelsen. Begge metodene oppnår samme resultat ved å koble etiketten og inndatafeltet sammen for bedre brukervennlighet og tilgjengelighet.
Takk for tilbakemeldingene dine!
Spør AI
Spør AI
Spør om hva du vil, eller prøv ett av de foreslåtte spørsmålene for å starte chatten vår
