Elementet <label> används för att associera en etikett med ett inmatningsfält i ett formulär. Denna association hjälper användare att förstå informationen som efterfrågas i formulärfältet. När en användare klickar på etiketten, fokuserar det automatiskt på motsvarande inmatningsfält.

Det finns två sätt att koppla etikett och inmatningselement:

Inbäddning

Genom att nästla ett formelement, såsom ett <input/>-fält, inom ett <label>-element, etablerar webbläsaren automatiskt en länk mellan etiketten och inmatningsfältet. Till exempel:

I det här exemplet kommer ett klick på etiketttexten "Name" automatiskt att fokusera på motsvarande inmatningsfält.

Använda id-attributet

När ett formulärelement inte är inbäddat i ett <label>-element, länkar du dem manuellt genom att använda id-attributet för input-elementet och for-attributet för label. Värdet för for-attributet och id-attributet måste vara detsamma. Till exempel:

I det här fallet är etiketten associerad med inmatningsfältet med hjälp av for-attributet på etiketten och id-attributet på inmatningsfältet. Ett klick på etiketttexten "Name" kommer också att fokusera på motsvarande inmatningsfält.

Note

Genom att använda dessa metoder etablerar du en visuell och semantisk koppling mellan label och input-fältet. Det kan dock finnas situationer där det är omöjligt att omsluta input-elementet inom label på grund av stilbegränsningar eller webbplatslogik. I sådana fall förlitar du dig vanligtvis på attributkopplingar för att behålla flexibiliteten i att tillämpa stilar och implementera bakgrundslogik.

Låt oss undersöka skillnaden mellan de två tillvägagångssätten genom att granska koden i bilden.

Notera

Ur webbläsarens perspektiv är det valda tillvägagångssättet för att etablera kopplingen oväsentligt. Båda metoderna uppnår samma resultat av att länka etiketten och inmatningsfältet tillsammans för förbättrad användbarhet och tillgänglighet.