HTML-Kurs / label und input richtig verknüpfen

Ein input erhält den Wert eines Benutzers; ein label zeigt dem Benutzer, wofür das Feld gedacht ist. Eine zuverlässige explizite Zuordnung gibt dem Feld ein id und gibt dem Beschriftung einen entsprechenden for-Wert.

Verbinden Sie ein Beschriftung mit einem Eingabefeld

<form method="get">
  <label for="visitor-name">Name</label>
  <input id="visitor-name" name="name" type="text">
  <button type="submit">Überprüfen</button>
</form>

Setzen Sie diesen Code in den body einer HTML-Datei und öffnen Sie ihn in einem Browser. Ein Klick auf „Name“ sollte den Fokus auf das Feld setzen. Das bloße Platzieren von Text neben einem Feld verbindet es nicht automatisch. Ein id muss im Dokument einzigartig sein; doppelte IDs können dazu führen, dass ein Label das falsche Feld anspricht.

Drücken Sie auch auf Tab, um auf das Feld zuzugreifen und zu überprüfen, dass das fokussierte Element sichtbar ist. Das Label ist der Name der Steuerung, nicht nur dekorativer Text. Assistive Technologien müssen erkennen können, welches Feld fokussiert ist.

Erfüllen id und name dieselbe Funktion?

Das Attribut id identifiziert ein Element im Dokument und kann es mit einem Label, einem Fragment oder einem Skript verknüpfen. name ist der Schlüssel, der verwendet wird, wenn das Formular den Wert übermittelt. Hier ist visitor-name das Ziel des Labels, während name der Übermittlungsschlüssel ist. Überprüfen Sie die übermittelten Namen und die Anfragemethoden mit der Datenlistenübung in Formularstruktur und GET vs. POST.

Wenn ein Klick auf das Label nichts bewirkt, vergleichen Sie for mit id. Wenn die Eingabe funktioniert, die übermittelte URL den Wert jedoch nicht enthält, überprüfen Sie name. Sie können id="visitor-name" in id="person-name" ändern, solange Sie das for des Labels aktualisieren; name="name" kann gleich bleiben, wenn der Server weiterhin diesen Schlüssel erwartet.

Eine getrennte Beschriftung reparieren

<!-- Falsch: for entspricht name statt id -->
<label for="full_name">Name</label>
<input id="person-name" name="full_name">

<!-- Richtig: for entspricht der Feldkennung -->
<label for="person-name">Name</label>
<input id="person-name" name="full_name">

Testen Sie die Fragmente in separaten Dateien. In der korrigierten Version sollte ein Klick auf den Namen den Fokus auf person-name setzen, während der übermittelte Schlüssel full_name bleibt. Kombinieren Sie nicht beide Beispiele in einem einzigen Dokument: Dies würde die ID duplizieren und den Vergleich ungültig machen.

Ein Platzhaltertext ersetzt kein Label

Ein placeholder bietet einen Hinweis oder ein kurzes Beispiel und verschwindet, wenn der Benutzer tippt. Es kann keinen dauerhaften Feldnamen ersetzen. Behalten Sie ein sichtbares Label bei und fügen Sie das Beispiel separat hinzu. Für dauerhafte Anweisungen, die einem Feld zugeordnet sind, siehe Einen Platzhaltertext zu Formularfeldern hinzufügen.

<label for="email">E-Mail-Adresse</label>
<input id="email" name="email" type="email"
       placeholder="name@example.com">

Auch wenn ein Design ein Beschriftung visuell verdeckt, muss das Feld dennoch einen zugänglichen Namen haben. Kontrollkästchen und Optionsfelder können ebenfalls innerhalb eines Labels verschachtelt werden, wie in <label><input type="checkbox" name="agree"> Ich stimme zu</label>. Klicken Sie auf den Text des Labels, um zu überprüfen, dass sich das Kontrollkästchen ändert. Wählen Sie klare Formulierungen, bevor Sie das Erscheinungsbild anpassen. Siehe die Referenz MDN zu Beschriftungen für die Zuordnungsmethoden.