HTMLTextAreaElement.labels — Eigenschaft · JavaScript-Referenz

Signatur

get HTMLTextAreaElement.labels

Beschreibung

Die Eigenschaft labels eines HTMLTextAreaElement gibt eine live NodeList aller <label>-Elemente zurück, die dem Textfeld zugeordnet sind. Eine Zuordnung besteht entweder explizit über das Attribut for des Labels, das der id der Textarea entspricht, oder implizit, wenn die Textarea innerhalb des <label>-Elements steht.

Nützlich ist die Eigenschaft vor allem für Barrierefreiheit und Formularvalidierung: Man kann etwa das zugehörige Label bei einem Fehler hervorheben, den Beschriftungstext für eigene Fehlermeldungen auslesen oder im Test prüfen, ob jedes Eingabefeld beschriftet ist.

Weil die Liste live ist, zeigt sie Änderungen im DOM sofort an, etwa wenn Labels hinzugefügt, entfernt oder deren for-Attribut geändert wird. Gibt es kein zugehöriges Label, erhält man eine leere NodeList (Länge 0), nicht null.

Rückgabewert

Typ

NodeList

Beschreibung

Eine live NodeList mit allen zugeordneten HTMLLabelElement-Objekten in Dokumentreihenfolge. Ist kein Label zugeordnet, ist die Liste leer.

Beispiele

Labels einer Textarea auslesen

// HTML:
// <label for="kommentar">Kommentar</label>
// <label>Ihre Nachricht: <textarea id="kommentar"></textarea></label>

const textarea = document.getElementById('kommentar');

console.log(textarea.labels.length);
for (const label of textarea.labels) {
  console.log(label.textContent.trim());
}

2 Kommentar Ihre Nachricht:

Label bei Validierungsfehler hervorheben

// HTML:
// <label for="bio">Kurzbiografie</label>
// <textarea id="bio" required minlength="20"></textarea>

const bio = document.getElementById('bio');

bio.addEventListener('blur', () => {
  const invalid = !bio.checkValidity();
  bio.labels.forEach((label) => {
    label.classList.toggle('fehler', invalid);
  });
});

Unbeschriftete Textareas finden (Barrierefreiheits-Check)

const unbeschriftet = [...document.querySelectorAll('textarea')]
  .filter((ta) => ta.labels.length === 0 && !ta.hasAttribute('aria-label'));

if (unbeschriftet.length > 0) {
  console.warn(`${unbeschriftet.length} Textarea(s) ohne Label gefunden`, unbeschriftet);
} else {
  console.log('Alle Textareas sind beschriftet.');
}

Alle Textareas sind beschriftet.

Live-Verhalten der NodeList

const ta = document.createElement('textarea');
ta.id = 'notiz';
document.body.append(ta);

const labels = ta.labels;
console.log(labels.length); // noch kein Label

const label = document.createElement('label');
label.htmlFor = 'notiz';
label.textContent = 'Notiz';
document.body.prepend(label);

console.log(labels.length); // dieselbe Liste, jetzt aktualisiert

0 1

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung an labels hat keine Wirkung und wirft im Strict Mode einen Fehler. Die Zuordnung ändert man über label.htmlFor oder die DOM-Struktur.
Live-Liste: Wenn man beim Durchlaufen das DOM verändert, ändert sich die Liste mit. Für eine feste Momentaufnahme [...ta.labels] oder Array.from() verwenden.
Nur im Dokument: Explizite for-Zuordnungen werden innerhalb desselben Baums (Dokument oder Shadow Root) aufgelöst. Ein for-Attribut außerhalb eines Shadow DOM findet keine Textarea darin.
ARIA zählt nicht: Beschriftungen über aria-label oder aria-labelledby erscheinen nicht in labels.
Doppelte IDs: Ein for-Attribut verweist nur auf das erste Element mit dieser id. Doppelte IDs führen zu fehlenden Zuordnungen.
Kompatibilität: In allen modernen Browsern verfügbar. Firefox unterstützt die Eigenschaft erst ab Version 56, der Internet Explorer gar nicht.

Siehe auch

HTMLTextAreaElement HTMLLabelElement HTMLLabelElement.control HTMLLabelElement.htmlFor HTMLInputElement.labels NodeList HTMLMeterElement.labels