HTML <label> etikett

Definition och användning

<label> Etiketten definierar en etikett (märkning) för input-elementet.

label-elementet visar inte några speciella effekter för användare. Det förbättrar emellertid användbarheten för musanvändare. Om du klickar på texten inom label-elementet, aktiveras detta kontroll. Det innebär att när användaren väljer denna etikett, flyttar webbläsaren automatiskt fokus till den relaterade formulärkontrollen.

<label> Etikettens for-attribut Den bör vara samma som relaterade elements id-attribut.

<label> Etiketten kan definiera etiketter (märken) för flera element:

Att använda elementen och etiketterna på rätt sätt kommer att vara till nytta för följande användare:

  • Skärmsläpparanvändare (när användaren fokuserar på ett element, läser upp etiketten)
  • Användare som har svårt att klicka på mycket små områden (t.ex. kryssrutor) - eftersom när användaren klickar <label> När texten i elementet byts ut, aktiveras inmatningen (detta ökar klickområdet)

Se också:

HTML DOM-referenshandbok:Label-objekt

Exempel

Tre enskilda radioalternativ med label:

<form action="/action_page.php">
  <input type="radio" id="html" name="fav_language" value="HTML">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="fav_language" value="CSS">
  <label for="css">CSS</label><br>
  <input type="radio" id="javascript" name="fav_language" value="JavaScript">
  <label for="javascript">JavaScript</label><br><br>
  <input type="submit" value="Skicka">
</form>

Prova själv

Tips och kommentarer

Tips:<label> For-attributet måste vara lika med id-attributet på det relaterade elementet för att kunna binda dem samman. Det är också möjligt att placera elementet i <label> Elementet länkar etiketten till elementet inuti.

Egenskap

Egenskap Värde Beskrivning
for Element id Definierar till vilket formulärelement label är bunden.
form Formulär id Definierar vilken formulär som label-fältet tillhör.

Globala egenskaper

<label> Etiketten stöder också Globala egenskaper i HTML

evenementegenskaper

<label> Etiketten stöder också Evenementegenskaper i HTML

Standard CSS-inställningar

De flesta webbläsare kommer att använda följande standardvärden för att visa <label> Element:

label {
  cursor: default;
}

Prova själv

Webbläsarstöd

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Stöd Stöd Stöd Stöd Stöd