HTMLFieldSetElement.form — Eigenschaft · JavaScript-Referenz

Signatur

HTMLFieldSetElement.form

Beschreibung

Die Eigenschaft form von HTMLFieldSetElement gibt das Formular zurück, dem ein <fieldset>-Element zugeordnet ist, als HTMLFormElement. Ist das Fieldset keinem Formular zugeordnet, ist der Wert null.

Die Zuordnung ergibt sich auf zwei Wegen: Entweder liegt das Fieldset im DOM innerhalb eines <form>-Elements, oder es verweist über das HTML-Attribut form="formular-id" auf ein Formular an beliebiger Stelle im Dokument. Das Attribut hat Vorrang vor der Verschachtelung. Verweist das Attribut auf eine ID, die es nicht gibt oder die zu keinem <form> gehört, ist der Wert null, auch wenn das Fieldset in einem Formular steckt.

Nützlich ist das, wenn du von einer Fieldset-Gruppe aus auf das ganze Formular zugreifen willst, etwa um es abzusenden, zurückzusetzen oder zu prüfen. So musst du nicht mit closest('form') den DOM-Baum hinauflaufen, und das funktioniert auch mit Formularen, die über das form-Attribut zugeordnet sind.

Rückgabewert

Typ

HTMLFormElement | null

Beschreibung

Das Formular, dem das Fieldset zugeordnet ist, oder null, wenn es keins gibt.

Beispiele

Fieldset innerhalb eines Formulars

// HTML:
// <form id="anmeldung">
//   <fieldset id="kontakt"><legend>Kontakt</legend>
//     <input name="email" type="email">
//   </fieldset>
// </form>

const fieldset = document.getElementById('kontakt');
console.log(fieldset.form?.id);
console.log(fieldset.form instanceof HTMLFormElement);

anmeldung true

Zuordnung über das form-Attribut außerhalb des Formulars

// HTML:
// <form id="bestellung"></form>
// <fieldset id="lieferung" form="bestellung">
//   <input name="strasse">
// </fieldset>
// <fieldset id="lose"></fieldset>

const lieferung = document.getElementById('lieferung');
const lose = document.getElementById('lose');

console.log(lieferung.form?.id); // Zuordnung über das Attribut
console.log(lose.form);          // kein Formular

bestellung null

Formular aus einer Fieldset-Gruppe heraus prüfen und absenden

const fieldset = document.querySelector('fieldset.zahlung');
const button = fieldset.querySelector('button.weiter');

button.addEventListener('click', () => {
  const form = fieldset.form;
  if (!form) {
    console.warn('Fieldset ist keinem Formular zugeordnet');
    return;
  }
  // requestSubmit() löst Validierung und das submit-Event aus
  if (form.reportValidity()) {
    form.requestSubmit();
  }
});

Die Eigenschaft ist schreibgeschützt

const fieldset = document.querySelector('fieldset');
const anderesFormular = document.createElement('form');

fieldset.form = anderesFormular; // wird ignoriert (im strict mode: TypeError)
console.log(fieldset.form === anderesFormular);

// Zuordnung stattdessen über das Attribut ändern:
anderesFormular.id = 'neu';
document.body.append(anderesFormular);
fieldset.setAttribute('form', 'neu');
console.log(fieldset.form.id);

false neu

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung an fieldset.form wird still ignoriert, im strict mode (also auch in ES-Modulen) gibt es einen TypeError. Die Zuordnung änderst du über setAttribute('form', id).
Attribut hat Vorrang: Ist das form-Attribut gesetzt, aber ungültig (ID fehlt oder gehört zu keinem <form>), liefert die Eigenschaft null, auch wenn das Fieldset in einem Formular liegt.
Fieldset-Elemente werden nicht abgesendet: Das Fieldset selbst schickt keine Daten mit. Es taucht aber in form.elements auf, und über fieldset.elements kommst du an die enthaltenen Steuerelemente.
Die Zuordnung per form-Attribut verbindet das Fieldset selbst mit dem Formular, nicht automatisch seine Kind-Elemente. Diese brauchen bei Bedarf ein eigenes form-Attribut.
Die Eigenschaft wird von allen modernen Browsern unterstützt. Zum Programmieren lohnt sich optionale Verkettung (fieldset.form?.…), weil null möglich ist.

Siehe auch

HTMLFieldSetElement.name HTMLFieldSetElement.type HTMLFieldSetElement.elements HTMLFieldSetElement.disabled HTMLFieldSetElement.validity