HTMLLabelElement — Schnittstelle · JavaScript-Referenz

Signatur

interface HTMLLabelElement extends HTMLElement

Beschreibung

HTMLLabelElement ist die DOM-Schnittstelle für <label>-Elemente. Sie erbt alle Eigenschaften und Methoden von HTMLElement und ergänzt einige wenige, die speziell für Beschriftungen gedacht sind. Ein Label verknüpft einen sichtbaren Text mit einem beschriftbaren Formularelement (z. B. <input>, <select>, <textarea>, <button>, <meter>, <output>, <progress>).

Die wichtigsten Eigenschaften:

htmlFor – spiegelt das HTML-Attribut for wider, also die id des verknüpften Steuerelements. Der Name weicht ab, weil for in JavaScript ein reserviertes Wort ist.
control (nur lesbar) – das tatsächlich verknüpfte Element: entweder das über for referenzierte oder, falls for fehlt, das erste beschriftbare Nachfahrenelement. Gibt null zurück, wenn es keines gibt.
form (nur lesbar) – das HTMLFormElement, zu dem das verknüpfte Steuerelement gehört, oder null.

Labels sind vor allem für Barrierefreiheit und Bedienbarkeit wichtig: Screenreader lesen den Label-Text als zugänglichen Namen vor, und ein Klick auf das Label fokussiert bzw. aktiviert das verknüpfte Steuerelement (z. B. setzt es ein Häkchen bei einer Checkbox). Umgekehrt liefert die Eigenschaft labels eines Formularelements eine NodeList aller zugehörigen Labels.

Eine Instanz erzeugt man nicht per Konstruktor, sondern mit document.createElement("label") oder erhält sie über DOM-Abfragen wie querySelector.

Parameter

Name	Typ	Default	Beschreibung
$htmlFor	string	""	Eigenschaft (lesen/schreiben): spiegelt das Attribut `for` – die `id` des zu beschriftenden Elements.
$control	HTMLElement \| null	null	Eigenschaft (nur lesbar): das verknüpfte beschriftbare Element.
$form	HTMLFormElement \| null	null	Eigenschaft (nur lesbar): das Formular des verknüpften Steuerelements.

Rückgabewert

Typ

HTMLLabelElement

Beschreibung

Ein Objekt, das ein <label>-Element im DOM repräsentiert, z. B. als Ergebnis von document.createElement("label").

Beispiele

Label dynamisch erzeugen und per htmlFor verknüpfen

const input = document.createElement("input");
input.type = "email";
input.id = "email";

const label = document.createElement("label");
label.htmlFor = "email"; // entspricht for="email"
label.textContent = "E-Mail-Adresse";

document.body.append(label, input);

console.log(label instanceof HTMLLabelElement);
console.log(label.getAttribute("for"));
console.log(label.control === input);

true email true

Implizite Verknüpfung durch Verschachtelung

// HTML: <form id="newsletter"><label>Abonnieren <input type="checkbox" name="abo"></label></form>
const label = document.querySelector("#newsletter label");

console.log(label.htmlFor);          // kein for-Attribut
console.log(label.control.name);     // erstes beschriftbares Kind
console.log(label.form.id);

abo newsletter

Alle Labels eines Feldes finden und Fehler markieren

// HTML: <label for="plz">PLZ</label> <input id="plz" required pattern="\d{5}">
const field = document.getElementById("plz");

field.addEventListener("blur", () => {
  const invalid = !field.checkValidity();
  // field.labels ist eine NodeList von HTMLLabelElement
  for (const label of field.labels) {
    label.classList.toggle("fehler", invalid);
  }
});

Klick auf Label programmatisch weiterleiten

const label = document.querySelector('label[for="agb"]');
const checkbox = label.control;

console.log(checkbox.checked);
label.click(); // Aktivierung wird an das Steuerelement weitergereicht
console.log(checkbox.checked);

false true

// Wichtig · Fallstricke

Namensfalle: In JavaScript heißt die Eigenschaft htmlFor, nicht for. label.for = "x" setzt nur eine beliebige JS-Eigenschaft und hat keine Wirkung auf das Attribut.
control und form sind nur lesbar; die Verknüpfung ändert man über htmlFor bzw. die DOM-Struktur.
Verweist for auf eine nicht existierende id oder auf ein nicht beschriftbares Element (z. B. <div>), ist control null – auch wenn ein passendes Kindelement existiert. for hat immer Vorrang.
Keine interaktiven Elemente (Links, weitere Buttons) in ein Label verschachteln – Klicks darauf lösen sonst mehrdeutiges Verhalten aus und verschlechtern die Barrierefreiheit.
Klick-Events auf dem Label erzeugen ein zusätzliches synthetisches click auf dem Steuerelement; Handler auf gemeinsamen Vorfahren können dadurch zweimal feuern.
Kompatibilität: htmlFor und form werden seit jeher unterstützt; control ist in allen modernen Browsern verfügbar, fehlt aber im Internet Explorer. Die form-Eigenschaft liefert laut aktueller Spezifikation das Formular des Steuerelements, nicht das des Labels.

Siehe auch

HTMLAreaElement HTMLBaseElement HTMLEmbedElement HTMLTableElement HTMLBRElement