HTMLLegendElement.form — Eigenschaft · JavaScript-Referenz

Signatur

get HTMLLegendElement.form

Beschreibung

Die schreibgeschützte Eigenschaft form eines <legend>-Elements liefert das Formular, dem die Legende indirekt zugeordnet ist. Eine Legende gehört nie direkt zu einem Formular. Sie übernimmt die Zuordnung von ihrem direkten Elternelement, sofern das ein <fieldset> ist.

Laut HTML-Spezifikation gilt:

Ist das direkte Elternelement der Legende ein <fieldset>, gibt legend.form denselben Wert zurück wie fieldset.form.
In allen anderen Fällen ist das Ergebnis null.

Weil fieldset.form auch das HTML-Attribut form="formular-id" auswertet, kann eine Legende einem Formular zugeordnet sein, das im DOM gar nicht ihr Vorfahre ist. Praktisch ist das z. B. in generischem Validierungs- oder Barrierefreiheits-Code, der ausgehend von einer Gruppenüberschrift das zugehörige Formular finden soll, etwa um Fehlermeldungen anzuzeigen oder Formulardaten auszulesen.

Rückgabewert

Typ

HTMLFormElement | null

Beschreibung

Das Formular des übergeordneten <fieldset>. null, wenn die Legende kein <fieldset> als direktes Elternelement hat oder wenn dieses Fieldset keinem Formular zugeordnet ist.

Beispiele

Formular einer Legende ermitteln

// HTML:
// <form id="bestellung">
//   <fieldset>
//     <legend id="lieferadresse">Lieferadresse</legend>
//     <input name="strasse">
//   </fieldset>
// </form>

const legend = document.getElementById('lieferadresse');
console.log(legend.form?.id);
console.log(legend.form === legend.parentElement.form);

bestellung true

Zuordnung über das form-Attribut des Fieldsets

// HTML:
// <form id="kontakt"></form>
// <fieldset form="kontakt">
//   <legend>Kontaktdaten</legend>
//   <input name="email">
// </fieldset>

const legend = document.querySelector('fieldset[form="kontakt"] > legend');
// Das Fieldset steht außerhalb von <form>, ist aber per Attribut zugeordnet
console.log(legend.form?.id);
console.log(legend.closest('form'));

kontakt null

Fälle, in denen null zurückgegeben wird

// Legende ohne Fieldset als Elternelement
const lose = document.createElement('legend');
console.log(lose.form); // null

// Fieldset ohne Formular
const fs = document.createElement('fieldset');
const lg = document.createElement('legend');
fs.append(lg);
console.log(lg.form); // null

// Erst nach dem Einhängen in ein Formular entsteht die Zuordnung
const form = document.createElement('form');
form.append(fs);
console.log(lg.form === form); // true

null null true

Praxis: Fehlermeldung an das zugehörige Formular melden

const markiereGruppe = (legend, meldung) => {
  const form = legend.form;
  if (!form) return; // Legende gehört zu keinem Formular
  legend.classList.add('fehler');
  const box = form.querySelector('.fehlerliste');
  box?.insertAdjacentText('beforeend', `${legend.textContent}: ${meldung}\n`);
};

document.querySelectorAll('fieldset[aria-invalid="true"] > legend')
  .forEach((lg) => markiereGruppe(lg, 'Bitte Angaben prüfen.'));

// Wichtig · Fallstricke

Nur lesbar: Eine Zuweisung wie legend.form = … wird ignoriert und wirft im Strict Mode einen TypeError. Die Zuordnung ändert man über die DOM-Position des Fieldsets oder über dessen Attribut form.
Nur das direkte Elternelement zählt: Steckt die Legende z. B. in einem <div> innerhalb des Fieldsets, ist form null, auch wenn ein Formular sie umschließt.
Nicht dasselbe wie closest('form'): closest() sucht nur im DOM nach oben und ignoriert das Attribut form. legend.form berücksichtigt es.
<legend> hat selbst kein Attribut form. Es erscheint auch nicht in form.elements, das übergeordnete <fieldset> dagegen schon.
Wird in allen modernen Browsern seit Langem unterstützt. Ältere Implementierungen haben teilweise den nächsten <form>-Vorfahren statt den Wert von fieldset.form geliefert.

Siehe auch

Element.closest() HTMLMeterElement.low HTMLLabelElement.form HTMLSelectElement.form HTMLObjectElement.form