HTML <label> tag

Definition and usage

<label> Labels define annotations (markers) for input elements.

The label element does not present any special effects to the user. However, it improves accessibility for mouse users. If you click on the text within the label element, it will trigger this control. That is, when the user selects this label, the browser will automatically focus on the form control related to the label.

<label> The label's for attribute They should be the same as the id attribute of the relevant elements.

<label> Labels can define labels (markers) for multiple elements:

Using the correct way to combine the above elements with labels will be beneficial for the following users:

  • Screen reader users (when the user focuses on an element, the label will be read)
  • brugere, der har svært ved at klikke på meget små områder (f.eks. afkrydsningsfelter) - fordi når brugeren klikker <label> tekst i elementet, det skifter input (dette øger klikområdet)

Se også:

HTML DOM Reference Manual:Label-objekt

Eksempel

Tre afkrydsningsfelter 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="Indsend">
</form>

Try It Yourself

Tips og kommentarer

Tip:<label> for-attributten skal være lig med det relevante elements id-attribut for at kunne binde dem sammen. Det er også muligt at placere elementet i <label> Elementet binder mærket ind i elementet.

Egenskab

Egenskab Værdi Beskrivelse
for Element id Definerer, hvilket formularelement label'en er knyttet til.
form Formular id Definerer, hvilket formulardata feltet tilhører.

Globale attributter

<label> Etiketten understøtter også Globale attributter i HTML.

event-attributter

<label> Etiketten understøtter også Event-attributter i HTML.

Standard CSS-indstillinger

De fleste browsere vil bruge følgende standardværdier til visning <label> Element:

label {
  cursor: default;
}

Try It Yourself

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support