HTML <label> Tag

Das HTML <label>-Tag definiert eine Beschriftung für ein Formularelement wie ein <input>, <select> oder <textarea>. Label und Steuerelement sind miteinander verknüpft, sodass der Browser weiß, dass der Text zu diesem bestimmten Feld gehört.

Diese Seite erklärt die zwei Methoden, ein Label mit einem Steuerelement zu verknüpfen, warum Labels für Barrierefreiheit und Benutzerfreundlichkeit wichtig sind und wie <label> im Vergleich zu ARIA-Beschriftungsattributen und dem placeholder abschneidet.

Warum Labels wichtig sind

Ein Label ist nicht nur sichtbarer Text neben einem Feld — es ist programmatisch mit einem Steuerelement verknüpft. Diese Verknüpfung bietet drei konkrete Vorteile:

Barrierefreiheit. Wenn das Steuerelement den Fokus erhält, gibt ein Screenreader sein Label aus, damit der Benutzer weiß, was er eingeben soll. Ohne Label wird das Feld nur nach Typ angekündigt (zum Beispiel „Bearbeitungsfeld") ohne weiteren Kontext.
Größere Klickfläche. Durch Klicken oder Tippen auf das Label wird das Steuerelement fokussiert (und bei Checkboxen/Optionsfeldern umgeschaltet). Das ist besonders hilfreich bei kleinen Checkboxen und Optionsfeldern, die auf Touchscreens schwer zu treffen sind.
Bessere Benutzerfreundlichkeit. Benutzer erkennen sofort, welche Beschriftung zu welchem Feld gehört, was Formularfehler reduziert.

Die zwei Methoden zur Label-Verknüpfung

Es gibt zwei Möglichkeiten, ein <label> mit seinem Steuerelement zu verbinden: die explizite Verknüpfung über das for-Attribut und die implizite Verknüpfung durch Umschließen des Steuerelements.

Explizite Verknüpfung (`for` + `id`)

Weisen Sie dem Steuerelement eine id zu und setzen Sie das for-Attribut des Labels auf denselben Wert. Der for-Wert muss exakt mit der id des Steuerelements übereinstimmen, und die id muss im Dokument vorhanden sein.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form>
      <label for="lfname">First name:</label>
      <input id="lfname" name="fname" type="text" />
    </form>
  </body>
</html>

Probier es selbst »

Die explizite Beschriftung ist der flexibelste Ansatz: Label und Steuerelement können sich an beliebiger Stelle im Markup befinden, was hilfreich ist, wenn das Layout (zum Beispiel ein CSS Grid oder eine Tabelle) die Beschriftung vom Feld trennt.

Implizite Verknüpfung (Steuerelement einschließen)

Platzieren Sie das Steuerelement innerhalb des <label>-Elements. Ein id/for-Paar ist nicht erforderlich — die Verschachtelung erstellt die Verknüpfung automatisch.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form>
      <label>Name
        <input name="Name" type="text" />
      </label>
    </form>
  </body>
</html>

Probier es selbst »

Beide Methoden liefern dasselbe Ergebnis. Das Einschließen ist kompakter und garantiert die Verknüpfung, auch wenn eine id vergessen wird; das explizite for ist die richtige Wahl, wenn die Markup-Struktur Label und Steuerelement voneinander trennt.

Regeln und Fallstricke

Ein Steuerelement pro Label. Ein einzelnes <label> ist mit genau einem Formularelement verknüpft. Wenn Sie zwei Eingabefelder in ein Label einschließen, wird nur das erste verknüpft.
Ein Steuerelement kann mehrere Labels haben. Dasselbe Eingabefeld kann von mehr als einem <label for="..."> referenziert werden, und alle fokussieren oder schalten es beim Klicken um.
for muss auf eine vorhandene id zeigen. Wenn der for-Wert keiner vorhandenen id entspricht, schlägt die Verknüpfung lautlos fehl — das Label wird zu einfachem Text.
Nur Formularelemente können beschriftet werden. <label> kann <input> (außer type="hidden"), <button>, <meter>, <output>, <progress>, <select> und <textarea> beschriften. Es beschriftet keine <div>, <span> oder Überschriften.
Kein interaktiver Inhalt innerhalb eines Labels. Platzieren Sie kein weiteres Steuerelement (ein zweites Eingabefeld, einen Button oder einen Link) innerhalb eines <label>, da es mit dem beschrifteten Steuerelement um Klicks konkurriert.

Checkboxen und Optionsfelder

Hier sind Labels besonders wichtig, da das klickbare Feld sehr klein ist. Mit einem passenden Label wird die gesamte Beschriftung Teil der Klickfläche.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <form>
      <label for="barca">Barcelona</label>
      <input type="radio" name="team" id="barca" value="Barcelona" />
      <br />
      <label for="real">Real Madrid</label>
      <input type="radio" name="team" id="real" value="Real Madrid" />
      <br />
    </form>
  </body>
</html>

Probier es selbst »

Beschriften ohne sichtbares `<label>`: ARIA und `placeholder`

Manchmal passt ein sichtbares Label nicht zum Design. Ein sichtbares <label> sollte dennoch Ihre erste Wahl sein — es kommt allen Benutzern zugute, nicht nur Screenreader-Nutzern — aber für Ausnahmen stehen folgende Optionen zur Verfügung.

`aria-label`

Verwenden Sie aria-label, um dem Steuerelement direkt einen zugänglichen Namen zu geben, wenn kein sichtbarer Text vorhanden ist, auf den verwiesen werden kann (zum Beispiel ein Suchfeld mit nur einem Lupensymbol).

<input type="search" aria-label="Search the site" />

`aria-labelledby`

Verwenden Sie aria-labelledby, wenn der beschriftende Text bereits an anderer Stelle auf der Seite vorhanden ist. Es referenziert eine oder mehrere Element-ids und ermöglicht — im Gegensatz zu for — das Zusammensetzen eines Labels aus mehreren Textelementen.

<span id="billing">Billing</span>
<span id="name">Name</span>
<input type="text" aria-labelledby="billing name" />

Wenn sowohl ein <label> als auch aria-labelledby vorhanden sind, hat aria-labelledby Vorrang.

`placeholder` ist kein Label

Ein placeholder ist Beispieltext, kein Label. Er verschwindet, sobald der Benutzer tippt, bietet in den meisten Browsern einen schlechten Farbkontrast und wird von Hilfstechnologien nicht zuverlässig als Feldname ausgegeben. Kombinieren Sie ein Eingabefeld immer mit einem echten <label> — verlassen Sie sich niemals allein auf placeholder.

<!-- Not accessible: no label, only a placeholder -->
<input type="email" placeholder="Email" />

<!-- Accessible: real label, placeholder is an optional hint -->
<label for="email">Email</label>
<input id="email" type="email" placeholder="[email protected]" />

Beispiel des HTML `<label>`-Tags mit CSS-Schriftart-Eigenschaften:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
       padding: 20px;
      }
      label {
        font-size: 20px;
        font-weight: 700;
        color: #1c87c9;
      }
      input {
        width: 50%;
        height: 28px;
        padding: 4px 10px;
        border: 1px solid #666;
        background: #cce6ff;
        color: #1c87c9;
        font-size: 16px;
      }
    </style>
  </head>
  <body>
    <form>
      <label for="user">Your Name:</label>
      <input id="user" name="Name" type="text" />
    </form>
  </body>
</html>

Probier es selbst »

Attribute

Attribut	Wert	Beschreibung
`accesskey`	`accesskey`	Definiert eine Tastenkombination, um das zugehörige Formularelement zu fokussieren (navigiert nicht dorthin oder springt nicht dazu).
`for`	`element\_id`	Legt die ID des Elements fest, an das das Label gebunden werden soll.
`form`	`form\_id`	Gibt die Formulare an, mit denen das Label verknüpft werden soll. Dieses Attribut ermöglicht es, Tags an beliebigen Stellen im Dokument zu platzieren, nicht nur als Nachfahren des `<form>`-Elements.

Das <label>-Element unterstützt auch die Global Attributes und die Event Attributes.

Beispiel des `form`-Attributs:

Das form-Attribut ermöglicht es, das Label außerhalb des zugehörigen <form>-Elements zu platzieren. Das Steuerelement verwendet weiterhin die normale for/id-Verknüpfung.

<form id="myForm">
  <input id="username" type="text" name="username" />
</form>
<label for="username" form="myForm">Username:</label>

Übung

Welche Methode verknüpft ein Label korrekt mit einem Texteingabefeld namens email?

Setze die id des Eingabefelds auf email und das for-Attribut des Labels auf email.Füge dem Eingabefeld einen placeholder mit dem Wert Email hinzu, anstatt ein Label zu verwenden.Lass das for-Attribut des Labels mit dem name-Attribut des Eingabefelds übereinstimmen.Gib dem Label und dem Eingabefeld denselben Klassennamen.

Warum Labels wichtig sind

Die zwei Methoden zur Label-Verknüpfung

Explizite Verknüpfung (for + id)

Implizite Verknüpfung (Steuerelement einschließen)

Regeln und Fallstricke

Checkboxen und Optionsfelder

Beschriften ohne sichtbares <label>: ARIA und placeholder

aria-label

aria-labelledby

placeholder ist kein Label

Beispiel des HTML <label>-Tags mit CSS-Schriftart-Eigenschaften:

Attribute

Beispiel des form-Attributs:

Verwandte Themen

Übung

Explizite Verknüpfung (`for` + `id`)

Beschriften ohne sichtbares `<label>`: ARIA und `placeholder`

`aria-label`

`aria-labelledby`

`placeholder` ist kein Label

Beispiel des HTML `<label>`-Tags mit CSS-Schriftart-Eigenschaften:

Beispiel des `form`-Attributs: