Elementet <label> brukes til å knytte en etikett til et inndatafelt i et skjema. Denne tilknytningen hjelper brukere med å forstå informasjonen som blir forespurt i skjemafeltet. Når en bruker klikker på etiketten, fokuserer det automatisk på det tilsvarende inndatafeltet.

Det er to måter å koble etikett- og inndataelementer på:

Innkapsling

Ved å nestle et skjemaelement, som et <input/>-felt, innenfor et <label>-element, oppretter nettleseren automatisk en kobling mellom etiketten og inndatafeltet. For eksempel:

I dette eksempelet vil et klikk på etikettteksten "Name" automatisk fokusere på det tilsvarende inndatafeltet.

Bruke id-attributtet

Når et skjemafelt ikke er nestet innenfor et <label>-element, kobler du dem manuelt ved å bruke id-attributtet til input-elementet og for-attributtet til label. Verdien av for-attributtet og id-attributtet må være den samme. For eksempel:

I dette tilfellet er etiketten assosiert med inndatafeltet ved å bruke for-attributtet på etiketten og id-attributtet på inndatafeltet. Et klikk på etikettteksten "Name" vil også fokusere på det tilsvarende inndatafeltet.

Merk

Ved å bruke disse metodene etablerer du en visuell og semantisk forbindelse mellom label og input-feltet. Det kan imidlertid være situasjoner der det er umulig å pakke input-elementet innenfor label på grunn av stilbegrensninger eller nettstedlogikk. I slike tilfeller stoler du vanligvis på attributtkoblinger for å opprettholde fleksibilitet i å anvende stiler og implementere bakgrunnslogikk.

La oss undersøke forskjellen mellom de to tilnærmingene ved å se på koden i bildet.

Merk

Fra nettleserens perspektiv er den valgte tilnærmingen for å etablere forbindelsen uten betydning. Begge metoder oppnår samme resultat med å koble etiketten og inndatafeltet sammen for bedre brukervennlighet og tilgjengelighet.