Tag <label>

Tag <label>

Definition

Status: Aktueller Standard

Das Tag <label> steht für label (Etikett).

Das HTML-Element <label> ist das Herzstück benutzerfreundlicher und barrierefreier Web-Formulare. Es verknüpft einen beschreibenden Text logisch mit einem Eingabefeld (wie <input>, <textarea> oder <select>). Screenreader lesen das Label laut vor, sobald der Fokus auf das Eingabefeld springt. Ohne Label wüssten sehbehinderte Nutzer oft nicht, was sie eingeben sollen.Durch das Label wird nicht nur das Feld selbst, sondern auch der Text klickbar. Ein Klick auf das Wort "Passwort" setzt den Cursor direkt ins Feld – besonders hilfreich bei kleinen Checkboxen oder auf mobilen Geräten.

Syntax

Explizit: <label for="email">E-Mail:</label> <input type="email" id="email"> (for = id)
Implizit: <label>Name: <input type="text"></label>

Attribute bzw. Unterelemente

for

Verbindet das Label mit der id eines Formular-Elements.

form

Falls außerhalb des <form>-Tags Zuordung zum Formular

Beispiele

= Tag

= Attribut

= Wert

Text

= Kommentar bzw. wichtig!

Beispiel <label> - ---

Der Code:

<form action="/submit" method="POST">
  <fieldset>
    <legend>Persönliche Informationen</legend>

    <!-- Text-Input mit explizitem Label -->
    <div class="form-group">
      <label for="username">Benutzername:</label>
      <input type="text" id="username" name="user" required>
    </div>

    <!-- Radio-Buttons mit Labels -->
    <div class="form-group">
      <p>Lieblingsgetränk:</p>
      <input type="radio" id="tea" name="drink" value="tea">
      <label for="tea">Tee</label>      
      <input type="radio" id="coffee" name="drink" value="coffee">
      <label for="coffee">Kaffee</label>
    </div>
  </fieldset>

  <fieldset>
    <legend>Einstellungen</legend>
    
    <!-- Checkbox mit Label -->
    <div class="form-group">
      <input type="checkbox" id="newsletter" name="subscribe">
      <label for="newsletter">Newsletter abonnieren</label>
    </div>
  </fieldset>

  <button type="submit">Absenden</button>
</form>

Ergebnis:

Ergebnis: <label>-Demo 1
---