<label> HTML-Label-Element

Probieren Sie es aus

<div class="preference">
  <label for="cheese">I like cheese.</label>
  <input type="checkbox" name="cheese" id="cheese" />
</div>

<div class="preference">
  <label for="peas">I like peas.</label>
  <input type="checkbox" name="peas" id="peas" />
</div>

.preference {
  display: flex;
  justify-content: space-between;
  width: 60%;
  margin: 0.5rem;
}

Attribute

Dieses Element enthält die globalen Attribute.

for

Der Wert ist die id des beschriftbaren Formularsteuerelements im selben Dokument, wodurch das <label> mit diesem Formularsteuerelement verknüpft wird. Beachten Sie, dass die JavaScript-Reflexionseigenschaft htmlFor ist.

Anwendungsnotizen

Verknüpfung eines Labels mit einem Formularsteuerelement

Das erste Element im Dokument mit einem id-Attribut, das mit dem Wert des for-Attributs übereinstimmt, ist das beschriftete Steuerelement für dieses label-Element — falls das Element mit dieser id tatsächlich ein beschriftbares Element ist. Wenn es keines ist, hat das for-Attribut keine Wirkung. Andere Elemente, die ebenfalls dem id-Wert entsprechen und weiter im Dokument vorkommen, werden nicht berücksichtigt.

Mehrere <label>-Elemente können mit demselben Formularsteuerelement verknüpft werden, indem mehrere <label>-Elemente den gleichen for-Attributwert haben, wodurch das Formularsteuerelement mehrere Beschriftungen erhält.

Das Verknüpfen eines <label> mit einem Formularsteuerelement, wie zum Beispiel <input> oder <textarea>, bietet einige wesentliche Vorteile:

• Der Labeltext ist nicht nur visuell mit seinem entsprechenden Texteingabefeld verbunden, sondern auch programmatisch verknüpft. Das bedeutet, dass beispielsweise ein Screenreader das Label vorliest, wenn der Benutzer auf das Formulareingabefeld fokussiert, was es Benutzern von unterstützender Technologie erleichtert, zu verstehen, welche Daten eingegeben werden sollen.
• Wenn ein Benutzer auf ein Label klickt oder es berührt/tippt, überträgt der Browser den Fokus auf die zugehörige Eingabe (das resultierende Ereignis wird auch für die Eingabe ausgelöst). Diese erweiterte Trefferfläche zum Fokussieren der Eingabe bietet jedem, der versucht, sie zu aktivieren, einen Vorteil – einschließlich derjenigen, die ein Touch-Gerät verwenden.

Es gibt zwei Möglichkeiten, ein <label> mit einem Formularsteuerelement zu verknüpfen, die üblicherweise als explizite und implizite Zuordnung bezeichnet werden.

Um ein <label>-Element explizit mit einem <input>-Element zu verknüpfen, müssen Sie zuerst dem <input>-Element das id-Attribut hinzufügen. Anschließend fügen Sie dem <label>-Element das for-Attribut hinzu, wobei der Wert von for derselbe ist wie die id im <input>-Element.

<label for="peas">I like peas.</label>
<input type="checkbox" name="peas" id="peas" />

Alternativ können Sie das <input>-Element direkt innerhalb des <label>-Elements verschachteln, in diesem Fall sind die Attribute for und id nicht erforderlich, da die Zuordnung implizit ist:

<label>
  I like peas.
  <input type="checkbox" name="peas" />
</label>

Diese beiden Methoden sind gleichwertig, es gibt jedoch einige Überlegungen:

• Obwohl gängige Browser- und Screenreader-Kombinationen die implizite Zuordnung unterstützen, tun dies nicht alle unterstützenden Technologien.
• Abhängig von Ihrem Design kann der Zuordnungstyp die Stilbarkeit beeinflussen. Wenn das <label> und das Formularsteuerelement nebeneinander statt als Eltern-Kind-Elemente positioniert sind, sind sie separate, benachbarte Boxen, was eine anpassbarere Anordnung ermöglicht, wie z.B. das Ausrichten mit Grid- oder Flex-Layout-Methoden.
• Eine explizite Zuordnung erfordert, dass das Formularsteuerelement eine id hat, die im gesamten Dokument eindeutig sein muss. Dies ist besonders in einer komponentenbasierten Anwendung schwierig. Frameworks bieten oft eigene Lösungen an, wie zum Beispiel Reacts useId(), doch es erfordert immer noch zusätzliche Abstimmung, um richtig zu funktionieren.

Im Allgemeinen empfehlen wir die Verwendung der expliziten Zuordnung mit dem for-Attribut, um die Kompatibilität mit externen Werkzeugen und unterstützenden Technologien sicherzustellen. Tatsächlich können Sie gleichzeitig verschachteln und id/for bereitstellen, um maximale Kompatibilität zu gewährleisten.

Das Formularsteuerelement, das ein Label beschriftet, wird als beschriftetes Steuerelement des Label-Elements bezeichnet. Mehrere Labels können mit demselben Formularsteuerelement verknüpft werden:

<label for="username">Enter your username:</label>
<input id="username" name="username" type="text" />
<label for="username">Forgot your username?</label>

Elemente, die mit einem <label>-Element verknüpft werden können, umfassen <button>, <input> (außer type="hidden"), <meter>, <output>, <progress>, <select> und <textarea>.

Barrierefreiheit

Interaktive Inhalte

Abgesehen von dem implizit zugeordneten Formularsteuerelement sollten keine zusätzlichen interaktiven Elemente wie Anker oder Buttons innerhalb eines <label> platziert werden. Dadurch wird es für Benutzer schwierig, die mit dem label verknüpfte Formulareingabe zu aktivieren.

Vermeiden Sie folgendes:

<label for="tac">
  <input id="tac" type="checkbox" name="terms-and-conditions" />
  I agree to the <a href="terms-and-conditions.html">Terms and Conditions</a>
</label>

Bevorzugen Sie dies:

<p>
  <a href="terms-and-conditions.html">Read our Terms and Conditions</a>
</p>
<label for="tac">
  <input id="tac" type="checkbox" name="terms-and-conditions" />
  I agree to the Terms and Conditions
</label>

Überschriften

Das Platzieren von Überschriftselementen innerhalb eines <label> stört viele Arten von unterstützender Technologie, da Überschriften häufig als Navigationshilfe verwendet werden. Wenn der Text des Labels visuell angepasst werden muss, verwenden Sie CSS-Klassen, die auf das <label>-Element angewendet werden.

Wenn ein Formular, oder ein Abschnitt eines Formulars, einen Titel benötigt, verwenden Sie das <legend>-Element innerhalb eines <fieldset>.

Vermeiden Sie folgendes:

<label for="your-name">
  <h3>Your name</h3>
  <input id="your-name" name="your-name" type="text" />
</label>

Bevorzugen Sie dies:

<label class="large-label" for="your-name">
  Your name
  <input id="your-name" name="your-name" type="text" />
</label>

Buttons

Ein <input>-Element mit einer type="button"-Deklaration und einem gültigen value-Attribut benötigt kein zugeordnetes Label. Dies könnte tatsächlich stören, wie unterstützende Technologie die Button-Eingabe interpretiert. Gleiches gilt für das <button>-Element.

Beispiele

Definieren eines impliziten Labels

<label>Click me <input type="text" /></label>

Definieren eines expliziten Labels mit dem "for"-Attribut

<label for="username">Click me to focus on the input field</label>
<input type="text" id="username" />

Technische Übersicht

Spezifikationen

Browser-Kompatibilität