Signatur
Beschreibung
HTMLLegendElement ist die DOM-Schnittstelle für das HTML-Element <legend>. Dieses Element ist die Überschrift eines <fieldset>. Es beschreibt eine Gruppe zusammengehöriger Formularfelder, zum Beispiel „Lieferadresse“ oder „Zahlungsart“. Screenreader lesen den Text der Legende zusammen mit den Feldern der Gruppe vor. Das macht das Element für die Barrierefreiheit wichtig.
Die Schnittstelle erbt alle Eigenschaften und Methoden von HTMLElement, Element, Node und EventTarget. Eigene Eigenschaften hat sie nur wenige:
form(nur lesbar,HTMLFormElement | null): das Formular, zu dem das umgebende<fieldset>gehört. Liegt die Legende nicht direkt in einem<fieldset>oder gehört das Fieldset zu keinem Formular, ist der Wertnull.align(string, veraltet): spiegelt das HTML-Attributalignwider ("left","right","center","top","bottom"). Verwenden Sie stattdessen CSS.
Die Schnittstelle hat keinen eigenen Konstruktor und keine Parameter. Instanzen erzeugen Sie mit document.createElement("legend") oder bekommen sie über DOM-Abfragen wie querySelector("legend"). In der Praxis nutzt man HTMLLegendElement vor allem, um Formulargruppen dynamisch aufzubauen, Beschriftungen zu ändern oder aufklappbare Fieldsets umzusetzen.
Rückgabewert
document.createElement("legend") oder DOM-Abfragen. Die wichtigste eigene Eigenschaft ist form (HTMLFormElement | null).Beispiele
Legende erzeugen und in ein Fieldset einfügen
const fieldset = document.createElement("fieldset");
const legend = document.createElement("legend");
legend.textContent = "Lieferadresse";
// Die Legende muss das erste Kind des Fieldsets sein
fieldset.prepend(legend);
document.querySelector("form").append(fieldset);
console.log(legend instanceof HTMLLegendElement);
console.log(legend.tagName);Zugehöriges Formular über legend.form ermitteln
// HTML:
// <form id="bestellung">
// <fieldset>
// <legend id="zahlung">Zahlungsart</legend>
// <label><input type="radio" name="zahlart" value="rechnung"> Rechnung</label>
// </fieldset>
// </form>
// <legend id="lose">Ohne Fieldset</legend>
const legend = document.getElementById("zahlung");
console.log(legend.form?.id);
const lose = document.getElementById("lose");
console.log(lose.form);Aufklappbares Fieldset über die Legende
document.querySelectorAll("fieldset.klappbar > legend").forEach((legend) => {
// Für Tastatur und Screenreader bedienbar machen
const button = document.createElement("button");
button.type = "button"; // sonst wird das Formular abgeschickt
button.textContent = legend.textContent;
button.setAttribute("aria-expanded", "true");
legend.replaceChildren(button);
button.addEventListener("click", () => {
const offen = button.getAttribute("aria-expanded") === "true";
button.setAttribute("aria-expanded", String(!offen));
// Alle Kinder außer der Legende ein- oder ausblenden
[...legend.parentElement.children]
.filter((el) => el !== legend)
.forEach((el) => { el.hidden = offen; });
});
});// Wichtig · Fallstricke
- Nur die erste Legende zählt: Nur ein
<legend>, das das erste Kind eines<fieldset>ist, wird als Überschrift dargestellt und für die Barrierefreiheit ausgewertet. An anderen Stellen verhält es sich wie ein normales Block-Element, undformist dortnull. disabled-Fieldsets: Wenn ein<fieldset disabled>deaktiviert ist, bleiben die Bedienelemente in seiner ersten Legende aktiv. Dieser Sonderfall ist praktisch für Schalter wie „Bereich aktivieren“, kann aber überraschen.formist nur lesbar: Sie können die Eigenschaft nicht setzen. Sie folgt immerfieldset.formund beachtet damit auch dasform-Attribut des Fieldsets.alignist veraltet: Richten Sie Legenden mit CSS aus. Beachten Sie: Wie Browser Legenden darstellen, weicht historisch von normalen Elementen ab. Flexbox oder Grid direkt auf<legend>funktioniert nicht überall gleich.- Kompatibilität: Die Schnittstelle wird von allen modernen Browsern unterstützt.