Signatur
Beschreibung
Die schreibgeschützte Eigenschaft control eines HTMLLabelElement gibt das Formular-Steuerelement zurück, das zu diesem <label> gehört. Das Ergebnis ist ein HTMLElement bzw. ein davon abgeleiteter Typ wie HTMLInputElement, HTMLSelectElement, HTMLTextAreaElement, HTMLButtonElement, HTMLMeterElement, HTMLOutputElement oder HTMLProgressElement. Auch formularfähige Custom Elements (static formAssociated = true) kommen infrage.
Wie die Verknüpfung festgestellt wird:
- Explizit: Hat das Label ein
for-Attribut (im DOMhtmlFor), sucht der Browser im selben Baum (Dokument bzw. Shadow Root) das erste Element mit dieserid. Ist dieses Element beschriftbar, wird es zurückgegeben, sonstnull. - Implizit: Ohne
for-Attribut wird das erste beschriftbare Nachfahren-Element des Labels in Baumreihenfolge zurückgegeben.
Nützlich ist control für generische Formular-Logik, also etwa Validierungsmeldungen, Barrierefreiheits-Prüfungen oder Tests, bei denen man ausgehend vom Label das zugehörige Feld braucht und nicht wissen will, ob es per for oder durch Verschachtelung verknüpft ist. Das Gegenstück dazu ist HTMLInputElement.labels (und die gleiche Eigenschaft der anderen Steuerelemente). Sie liefert alle Labels eines Feldes als NodeList.
Rückgabewert
null. null kommt zurück, wenn es kein passendes Element gibt, die referenzierte id fehlt oder das gefundene Element nicht beschriftbar ist (z. B. ein <div> oder <input type="hidden">).Beispiele
Explizite und implizite Verknüpfung auslesen
document.body.innerHTML = `
<label id="l1" for="email">E-Mail</label>
<input id="email" type="email">
<label id="l2">Newsletter <input type="checkbox" name="news"></label>
<label id="l3" for="gibtEsNicht">Verwaist</label>
`;
const l1 = document.getElementById('l1');
const l2 = document.getElementById('l2');
const l3 = document.getElementById('l3');
console.log(l1.control.id); // über for-Attribut
console.log(l2.control.name); // über Verschachtelung
console.log(l3.control); // keine VerknüpfungPflichtfelder am Label markieren
// Alle Labels, deren Steuerelement 'required' ist, mit einem Sternchen versehen
const markRequiredLabels = (root = document) => {
for (const label of root.querySelectorAll('label')) {
const field = label.control;
if (field?.required && !label.dataset.marked) {
label.append(' *');
label.dataset.marked = 'true';
}
}
};
markRequiredLabels();Barrierefreiheits-Check: verwaiste Labels finden
// Findet Labels, die auf kein (beschriftbares) Element verweisen
const findOrphanLabels = () =>
[...document.querySelectorAll('label')]
.filter((label) => label.control === null)
.map((label) => ({
text: label.textContent.trim(),
for: label.htmlFor || '(kein for)'
}));
console.table(findOrphanLabels());Fehlermeldung vom Label aus setzen
const label = document.querySelector('label[for="plz"]');
const input = label.control;
input.addEventListener('input', () => {
const ok = /^\d{5}$/.test(input.value);
input.setCustomValidity(ok ? '' : 'Bitte fünfstellige PLZ eingeben');
label.classList.toggle('fehler', !ok);
});// Wichtig · Fallstricke
- Schreibgeschützt: Eine Zuweisung an
label.controlwird ignoriert bzw. wirft im Strict Mode einenTypeError. Wer die Verknüpfung ändern will, setztlabel.htmlFor = 'neueId'. - Nur beschriftbare Elemente: Verweist
forauf ein nicht beschriftbares Element (z. B.<div>,<input type="hidden">), ist das Ergebnisnull. Das gilt auch dann, wenn innerhalb des Labels ein passendes Feld steckt, denn dasfor-Attribut hat Vorrang. - Doppelte IDs: Es zählt nur das erste Element mit der passenden
id. Doppelte IDs führen deshalb schnell zu unerwarteten Ergebnissen. - Shadow DOM:
forwird nur im eigenen Baum aufgelöst. Ein Label im Light DOM findet also kein<input>innerhalb einer Shadow Root und umgekehrt. - Der Wert wird bei jedem Zugriff neu berechnet und spiegelt daher immer den aktuellen DOM-Zustand wider.
- Kompatibilität: Die Eigenschaft wird seit vielen Jahren von allen modernen Browsern unterstützt (Chrome, Firefox, Safari, Edge). Der alte Internet Explorer kennt sie nicht; dort muss man
document.getElementById(label.htmlFor)als Ersatz verwenden.