<label>: Das 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 labelbaren Formularsteuerungselements im selben Dokument, das die <label> mit dieser Formularsteuerung verbindet. Beachten Sie, dass die JavaScript-Reflexionseigenschaft htmlFor ist.

Nutzungshinweise

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 – wenn das Element mit dieser id tatsächlich ein labelbares Element ist. Wenn es kein labelbares Element ist, hat das for-Attribut keine Wirkung. Wenn es weitere Elemente gibt, die ebenfalls den id-Wert haben, werden diese später im Dokument nicht berücksichtigt.

Mehrere <label>-Elemente können mit demselben Formularsteuerelement assoziiert werden, indem mehrere <label>-Elemente denselben for-Attributwert haben, was dem Formularsteuerelement mehrere Beschriftungen gibt.

Die Verknüpfung eines <label> mit einem Formularsteuerelement, wie zum Beispiel <input> oder <textarea> bietet einige große Vorteile:

• Der Beschriftungstext ist nicht nur visuell mit seinem entsprechenden Texteingabe verbunden; es ist auch programmatisch damit verknüpft. Das bedeutet zum Beispiel, dass ein Screenreader die Beschriftung vorliest, wenn der Benutzer auf den Formulareingaben fokusiert ist, was es einem Benutzer mit unterstützender Technologie erleichtert, die einzugebenden Daten zu verstehen.
• Wenn ein Benutzer auf eine Beschriftung klickt oder tippt, übergibt der Browser den Fokus auf die zugehörige Eingabe (das resultierende Ereignis wird auch für die Eingabe ausgelöst). Dieser erweiterte Berührungsbereich zum Fokussieren der Eingabe bietet jedem, der versucht sie zu aktivieren, einen Vorteil - einschließlich derjenigen, die ein Touchscreen-Gerät verwenden.

Es gibt zwei Möglichkeiten, ein <label> mit einem Formularsteuerelement zu verknüpfen, allgemein auch als explizite und implizite Verknüpfung bezeichnet.

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

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

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

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

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

• Während gängige Browser- und Screenreader-Kombinationen die implizite Verknüpfung unterstützen, tun dies nicht alle unterstützenden Technologien.
• Abhängig von Ihrem Design kann die Art der Verknüpfung die Stilbarkeit beeinflussen. Indem das <label> und das Formularsteuerelement als Geschwisterelemente und nicht als Eltern-Kind beibehalten werden, sind sie separate, benachbarte Boxen, die ein anpassungsfähigeres Layout ermöglichen, wie das Ausrichten mit Grid- oder Flex-Layout-Methoden.
• Die explizite Verknüpfung erfordert, dass das Formularsteuerelement eine id hat, die im gesamten Dokument eindeutig sein muss. Dies ist vor allem in einer komponentisierten Anwendung schwierig. Frameworks bieten oft ihre eigenen Lösungen, wie React's useId(), es erfordert jedoch immer noch zusätzliche Orchestrierung, um es richtig zu machen.

Generell empfehlen wir, die explizite Verknüpfung mit dem for-Attribut zu verwenden, um die Kompatibilität mit externen Werkzeugen und unterstützenden Technologien sicherzustellen. Tatsächlich können Sie gleichzeitig verschachteln und id/for für maximale Kompatibilität bereitstellen.

Das Formularsteuerelement, für das ein Label eine Beschriftung ist, wird als beschriftetes Steuerelement des Labelelements bezeichnet. Mehrere Beschriftungen können mit demselben Formularsteuerelement assoziiert 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 der implizit verknüpften Formularsteuerung sollten keine zusätzlichen interaktiven Elemente wie Anker oder Schaltflächen innerhalb eines <label> platziert werden. Dies erschwert es den Benutzern, das Formularfeld zu aktivieren, das mit dem label verknüpft ist.

Nicht so machen:

<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>

So bevorzugen:

<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> beeinträchtigt viele Arten von unterstützender Technologie, da Überschriften oft als Navigationselement verwendet werden. Wenn der Text des Labels visuell angepasst werden muss, verwenden Sie stattdessen 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, das innerhalb eines <fieldset> platziert wird.

Nicht so machen:

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

So bevorzugen:

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

Schaltflächen

Ein <input>-Element mit einer type="button"-Deklaration und einem gültigen value-Attribut benötigt kein zugehöriges Label. Dies könnte tatsächlich die Art und Weise beeinträchtigen, wie unterstützende Technologien die Schaltflächeneingabe analysieren. Dasselbe gilt für das <button>-Element.

Beispiele

Implizites Label definieren

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

Explizites Label mit dem "for"-Attribut definieren

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

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität