Label für Eingabe-Element

Das <label>-Element wird verwendet, um ein Label mit einem Eingabefeld in einem Formular zu verknüpfen. Diese Zuordnung hilft den Benutzern, die im Formularfeld angeforderten Informationen zu verstehen. Wenn ein Benutzer auf das Label klickt, wird automatisch das entsprechende Eingabefeld fokussiert.

Es gibt zwei Möglichkeiten, Label- und Eingabeelemente zu verbinden:

Umhüllung

Durch das Verschachteln eines Formularelements, wie z.B. eines <input/>-Feldes, innerhalb eines <label>-Elements stellt der Browser automatisch eine Verbindung zwischen dem Label und dem Eingabefeld her. Zum Beispiel:

In diesem Beispiel wird durch Klicken auf den Beschriftungstext "Name" automatisch das entsprechende Eingabefeld fokussiert.

Verwendung des id-Attributs

Wenn ein Formularelement nicht innerhalb eines <label>-Elements verschachtelt ist, verknüpfen Sie sie manuell, indem Sie das id-Attribut des input-Elements und das for-Attribut des label verwenden. Der Wert des for-Attributs und des id-Attributs muss identisch sein. Zum Beispiel:

In diesem Fall ist das Label mit dem Eingabefeld über das for-Attribut im Label und das id-Attribut im Eingabefeld verknüpft. Durch Klicken auf den Beschriftungstext "Name" wird auch das entsprechende Eingabefeld fokussiert.

Hinweis

Durch die Verwendung dieser Methoden stellen Sie eine visuelle und semantische Verbindung zwischen dem label und dem input-Feld her. Es kann jedoch Situationen geben, in denen das Einbetten des input-Elements innerhalb des label aufgrund von Stilbeschränkungen oder Website-Logik nicht möglich ist. In solchen Fällen verlassen Sie sich häufig auf Attributverbindungen, um Flexibilität bei der Anwendung von Stilen und der Implementierung von Hintergrundlogik zu bewahren.

Lassen Sie uns den Unterschied zwischen den beiden Ansätzen untersuchen, indem wir den Code im Bild betrachten.

Hinweis

Aus Sicht des Browsers ist der gewählte Ansatz zur Herstellung der Verbindung unerheblich. Beide Methoden erzielen dasselbe Ergebnis, indem sie das Label und das Eingabefeld für verbesserte Benutzerfreundlichkeit und Zugänglichkeit miteinander verbinden.