HTML- <label> -Tag
Beispiel
Drei Optionsfelder mit Beschriftungen:
<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="Submit">
</form>
Definition und Verwendung
Das <label>Tag definiert eine Bezeichnung für mehrere Elemente:
- <input type="checkbox">
- <Eingabetyp="Farbe">
- <Eingabetyp="Datum">
- <input type="datetime-local">
- <input type="e-mail">
- <Eingabetyp="Datei">
- <Eingabetyp="Monat">
- <input type="number">
- <Eingabetyp="Kennwort">
- <input type="radio">
- <Eingabetyp="Bereich">
- <input type="Suche">
- <input type="tel">
- <Eingabetyp="text">
- <input type="time">
- <input type="url">
- <input type="week">
- <Meter>
- <Fortschritt>
- <auswählen>
- <Textbereich>
Die richtige Verwendung von Etiketten mit den oben genannten Elementen hat folgende Vorteile:
- Screenreader-Benutzer (liest das Label laut vor, wenn der Benutzer auf das Element fokussiert ist)
- Benutzer, die Schwierigkeiten haben, auf sehr kleine Bereiche (z. B. Kontrollkästchen) zu klicken – denn wenn ein Benutzer auf den Text innerhalb des
<label>Elements klickt, wird die Eingabe umgeschaltet (dies erhöht den Trefferbereich).
Tipps und Hinweise
Tipp: Das for-Attribut von <label>
muss gleich dem id-Attribut des verwandten Elements sein, um sie miteinander zu verbinden. Ein Label kann auch an ein Element gebunden werden, indem das Element innerhalb des <label>Elements platziert wird.
Browser-Unterstützung
| Element | |||||
|---|---|---|---|---|---|
| <label> | Yes | Yes | Yes | Yes | Yes |
Attribute
| Attribute | Value | Description |
|---|---|---|
| for | element_id | Specifies the id of the form element the label should be bound to |
| form | form_id | Specifies which form the label belongs to |
Globale Attribute
Das <label>Tag unterstützt auch die globalen Attribute in HTML .
Ereignisattribute
Das <label>Tag unterstützt auch die Ereignisattribute in HTML .
Verwandte Seiten
HTML-DOM-Referenz: Label-Objekt
Standard-CSS-Einstellungen
Die meisten Browser zeigen das <label>Element mit den folgenden Standardwerten an:
Beispiel
label {
cursor: default;
}