HTMLLabelElement.htmlFor — Eigenschaft · JavaScript-Referenz

Signatur

HTMLLabelElement.htmlFor

Beschreibung

Die Eigenschaft htmlFor spiegelt das HTML-Attribut for eines <label>-Elements. Sie enthält als Zeichenkette die id des Steuerelements (z. B. <input>, <select>, <textarea>), das durch das Label beschriftet wird. Der Name lautet htmlFor statt for, weil for in JavaScript ein reserviertes Schlüsselwort ist.

Die Verknüpfung ist wichtig für Barrierefreiheit und Bedienbarkeit: Screenreader lesen den Label-Text als Namen des Feldes vor, und ein Klick auf das Label fokussiert bzw. aktiviert das zugehörige Steuerelement – bei Checkboxen und Radiobuttons vergrößert das die Klickfläche erheblich.

Man verwendet htmlFor vor allem, wenn Formulare dynamisch per JavaScript erzeugt werden oder wenn IDs zur Laufzeit generiert werden. Um das tatsächlich verknüpfte Element zu erhalten, ist die schreibgeschützte Eigenschaft HTMLLabelElement.control meist praktischer, da sie auch implizite Verknüpfungen (Steuerelement innerhalb des Labels) berücksichtigt.

Rückgabewert

Typ

string

Beschreibung

Die ID des zugehörigen Steuerelements als Zeichenkette. Ist kein for-Attribut gesetzt, wird ein leerer String "" zurückgegeben. Beim Setzen wird der Wert in das for-Attribut geschrieben.

Beispiele

Verknüpfte ID auslesen

// HTML: <label id="lbl-mail" for="email">E-Mail</label> <input id="email" type="email">
const label = document.getElementById('lbl-mail');
console.log(label.htmlFor);
console.log(label.getAttribute('for'));
console.log(label.control === document.getElementById('email'));

email email true

Label und Eingabefeld dynamisch erzeugen

const createField = (name, text) => {
  const id = `feld-${name}-${crypto.randomUUID().slice(0, 8)}`;

  const label = document.createElement('label');
  label.htmlFor = id; // setzt das for-Attribut
  label.textContent = text;

  const input = document.createElement('input');
  input.id = id;
  input.name = name;

  const wrapper = document.createElement('div');
  wrapper.append(label, input);
  return wrapper;
};

const field = createField('vorname', 'Vorname');
document.querySelector('form').append(field);
console.log(field.querySelector('label').outerHTML.startsWith('<label for="feld-vorname-'));

true

Formular auf fehlende Label-Verknüpfungen prüfen

const checkLabels = () => {
  document.querySelectorAll('label').forEach((label) => {
    if (label.htmlFor && !document.getElementById(label.htmlFor)) {
      console.warn(`Label "${label.textContent.trim()}" verweist auf unbekannte ID "${label.htmlFor}"`);
    } else if (!label.control) {
      console.warn(`Label "${label.textContent.trim()}" hat kein Steuerelement`);
    }
  });
};

checkLabels();

// Wichtig · Fallstricke

Name beachten: label.for existiert nicht und liefert undefined. Im DOM heißt die Eigenschaft htmlFor, im HTML-Attribut for (analog zu className/class). In React/JSX heißt die Prop ebenfalls htmlFor.
Der Wert wird nicht validiert: Eine ID, die im Dokument nicht existiert, wird widerspruchslos gesetzt. Prüfe bei Bedarf mit label.control, ob wirklich ein Element verknüpft ist.
Die ID muss im Dokument eindeutig sein; bei doppelten IDs wird das erste passende Element verwendet. Bei Web Components verweist for nicht über Shadow-DOM-Grenzen hinweg.
Nur „labelbare“ Elemente (input außer type=\"hidden\", select, textarea, button, meter, output, progress, formularfähige Custom Elements) können verknüpft werden.
Auch HTMLOutputElement.htmlFor existiert, liefert dort aber eine DOMTokenList statt eines Strings.
Kompatibilität: Wird von allen Browsern seit jeher unterstützt.

Siehe auch

Element.id HTMLLabelElement.form HTMLLabelElement.control HTMLOutputElement.htmlFor HTMLTemplateElement.htmlFor