HTML <label> Tag

Definition und Verwendung

<label> Das Label definiert eine Beschriftung für das input element.

Das Label element zeigt dem Benutzer keine speziellen Effekte. Es verbessert jedoch die Zugänglichkeit für Mausnutzer. Wenn Sie auf den Text im Label element klicken, wird dieser Schalter ausgelöst. Das bedeutet, wenn der Benutzer das Label wählt, zoomt der Browser automatisch den Fokus auf den mit dem Label verbundenen Formularelement.

<label> Label for-Attribut es sollte mit dem id-Attribut des entsprechenden Elements übereinstimmen.

<label> Ein Label kann für mehrere Elemente ein Label (Markierung) definieren:

Die korrekte Verwendung der genannten Elemente mit dem Label ist förderlich für die folgenden Benutzer:

  • Screenreader-Nutzer (wenn der Benutzer auf ein Element fokussiert ist, wird das Label gelesen)
  • Benutzer, die sehr kleine Bereiche (z.B. Checkboxen) schwer zu klicken sind - weil wenn der Benutzer klickt <label> kann den Eingabebereich umschalten, wenn der Text im Element angezeigt wird (das erweitert den Klickbereich)

Weitere Informationen:

HTML DOM-Referenzhandbuch:Label-Objekt

Beispiel

Drei Auswahlkästchen mit 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="Einsenden">
</form>

Selbst ausprobieren

Hinweise und Anmerkungen

Hinweis:<label> Das Attribut for muss mit dem Attribut id des entsprechenden Elements übereinstimmen, um sie miteinander zu verbinden. Es kann auch durch Platzieren des Elements in <label> Das Label wird im Elementinneren mit dem Element verbunden.

Attribut

Attribut Wert Beschreibung
for Element-ID Bestimmt, an welchem Formularelement das Label gebunden ist.
form Formular-ID Bestimmt das Formular, dem das Label-Feld gehört.

Globale Attribute

<label> Der Tag unterstützt auch Globale Attribute in HTML.

Ereignisattribute

<label> Der Tag unterstützt auch Ereignisattribute in HTML.

Standardmäßige CSS-Einstellungen

Die meisten Browser verwenden die folgenden Standardwerte zur Anzeige <label> Element:

label {
  cursor: default;
}

Selbst ausprobieren

Browserkompatibilität

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Unterstützung Unterstützung Unterstützung Unterstützung Unterstützung