HTML label: for und id verknüpfen und die Klickfläche vergrößern

HTML <label> verknüpft den Namen eines Formularsteuerelements mit seinem sichtbaren Text und unterstützenden Technologien. Verbinden Sie das for des Labels mit dem id des Steuerelements oder platzieren Sie das Steuerelement innerhalb des Labels. Das Klicken auf den zugeordneten Text kann ein Eingabefeld fokussieren oder ein Kontrollkästchen umschalten.

Steuerelemente explizit mit for und id verbinden

Das for-Attribut nimmt die id der Zielsteuerung im selben Dokument, nicht dessen name. Eine id muss innerhalb des Dokuments eindeutig sein, während name ein Feld in gesendeten Daten identifiziert. Selbst wenn das Layout label und input trennt, kann ihre Namensbeziehung intakt bleiben, wenn for und id übereinstimmen.

Speichern Sie das folgende Dokument als labels.html und öffnen Sie es in einem Browser. Die Texteingabe verwendet for; das Kontrollkästchen verwendet ein umschließendes Label. Dies ist eine Schnittstellenübung, die keine Daten an einen Server sendet.

<!doctype html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Label-Zuordnungen vergleichen</title>
</head>
<body>
  <h1>Namen in Formularen</h1>
  <p>
    <label for="reader-name">Anzeigename</label>
    <input id="reader-name" name="reader" type="text"
           aria-describedby="name-help" placeholder="z. B. Himmel">
  </p>
  <p id="name-help">Geben Sie den Spitznamen ein, der auf dem Bildschirm erscheinen soll.</p>
  <p>
    <label>
      <input type="checkbox" name="tips" value="yes">
      Lernhinweise erhalten
    </label>
  </p>
</body>
</html>

1. Klicken Sie auf Anzeigename, um den Cursor in das Eingabefeld zu setzen. Nach dem Tippen verschwindet der Platzhalter, aber das Label bleibt sichtbar.
2. Klicken Sie auf den Text Lernhinweise erhalten, um das Kontrollkästchen auszuwählen, und klicken Sie dann erneut, um es zu deaktivieren. Sie müssen das kleine Kontrollkästchen nicht genau treffen.
3. Verwenden Sie Tab, um zwischen den Steuerelementen zu wechseln, und die Leertaste, um das Kontrollkästchen umzuschalten. Überprüfen Sie auch die Tastaturinteraktion.

Umhüllende Beschriftungen und ergänzende Beschreibungen erfüllen unterschiedliche Aufgaben

Das Platzieren eines input innerhalb von label erstellt eine implizite Zuordnung ohne for. Fügen Sie nur die zugeordnete Steuerung innerhalb eines Labels ein und verschachteln Sie kein weiteres Label darin. Sie können auch id und for mit einem umschließenden Label verwenden, aber for muss sich auf die enthaltene Steuerung beziehen. Eine explizite for/id-Zuordnung ist für die Kompatibilität mit unterstützender Technologie und externen Werkzeugen zu erwägen.

Das Label ist der Name, der Lesern sagt, was eingetragen werden soll. Platzieren Sie ergänzende Anweisungen oder Fehlermeldungen in einem separaten Absatz und ordnen Sie sie aria-describedby zu. Im Beispiel ergänzt Geben Sie den Spitznamen ein, der auf dem Bildschirm erscheinen soll. den Namen; das Platzhalter-Attribut wird nicht als Ersatz für das Label verwendet.

Wenn die Zuordnung oder das Klicken nicht funktioniert

Überprüfen Sie auf Tippfehler und Unterschiede in der Groß-/Kleinschreibung in for, duplizierte id-Werte und den Typ des Ziel-Elements. for auf ein Element zu verweisen, das nicht beschriftet werden kann, wie z. B. ein hidden-Eingabefeld, wird es nicht wie ein normales Eingabefeld funktionieren lassen. Labels funktionieren auch mit select und textarea; benennen Sie Gruppen verwandter Auswahlmöglichkeiten mit fieldset und legend.

Separate Links oder Schaltflächen innerhalb eines Labels zu platzieren, kann unklar machen, ob ein Klick navigieren oder ein Steuerelement auswählen soll. Platzieren Sie zusätzliche Links außerhalb und erklären Sie zuerst den Kontext. Gestalten Sie das Label mit CSS, anstatt ein Überschriften-Element nur zur Vergrößerung einzufügen. Die MDN-Referenz zum label-Element beschreibt die unterstützten Steuerelemente und die Anforderungen für die Erstellung.