HTMLButtonElement.form — Eigenschaft · JavaScript-Referenz

Signatur

get HTMLButtonElement.form

Beschreibung

Die Eigenschaft form eines <button>-Elements gibt das Formular zurück, zu dem der Button gehört. Das ist das Formular, das der Button abschickt oder zurücksetzt, wenn er vom Typ submit oder reset ist. Ist der Button keinem Formular zugeordnet, liefert die Eigenschaft null.

Wie die Zuordnung zustande kommt, hängt davon ab, ob ein form-Attribut gesetzt ist:

Ohne form-Attribut: Zugeordnet wird das nächstgelegene übergeordnete <form>-Element.
Mit form-Attribut: Zugeordnet wird das Formular, dessen id dem Attributwert entspricht. Dieses Formular kann irgendwo im selben Dokument stehen, auch außerhalb des Buttons. Gibt es keine passende id, ist der Wert null, selbst wenn der Button in einem anderen Formular steckt.

In der Praxis braucht man die Eigenschaft vor allem in gemeinsamen Event-Handlern. Damit findet man vom geklickten Button aus das passende Formular, um es zu prüfen, seine Daten mit FormData auszulesen oder es gezielt per requestSubmit() abzuschicken. Das ist sicherer als closest('form'), denn auch Buttons, die über das form-Attribut außerhalb des Formulars stehen, werden richtig erkannt.

Rückgabewert

Typ

HTMLFormElement | null

Beschreibung

Das zugeordnete HTMLFormElement oder null, wenn der Button zu keinem Formular gehört.

Beispiele

Zugeordnetes Formular auslesen

// HTML:
// <form id="login"><button id="btn" type="submit">Anmelden</button></form>
// <button id="lose">Ohne Formular</button>

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

console.log(btn.form.id);  // Formular über das umschließende Element
console.log(lose.form);    // kein Formular vorhanden

login null

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

// HTML:
// <form id="bestellung"><input name="menge" value="3"></form>
// <footer><button id="senden" form="bestellung">Bestellen</button></footer>

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

console.log(senden.form === document.getElementById('bestellung'));
console.log(senden.closest('form')); // closest() findet es hier nicht!

true null

Gemeinsamer Klick-Handler für mehrere Formulare

document.addEventListener('click', async (event) => {
  const button = event.target.closest('button[data-action="speichern"]');
  if (!button) return;

  const form = button.form;
  if (!form) {
    console.warn('Button ist keinem Formular zugeordnet');
    return;
  }

  if (!form.reportValidity()) return; // Validierung anzeigen

  const daten = Object.fromEntries(new FormData(form));
  const res = await fetch(form.action, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(daten)
  });
  console.log('Status:', res.status);
});

Status: 200

// Wichtig · Fallstricke

Nur lesbar: Wenn man button.form = otherForm zuweist, passiert nichts (im Strict Mode gibt es einen TypeError). Um die Zuordnung zu ändern, setzt man das Attribut: button.setAttribute('form', 'andere-id').
Das Attribut hat Vorrang: Verweist das form-Attribut auf eine id, die es nicht gibt, ist der Wert null, auch wenn der Button in einem <form> steht.
Nicht mit closest('form') verwechseln: closest() sucht nur im DOM-Baum nach oben und berücksichtigt das form-Attribut nicht.
Shadow DOM: Das form-Attribut wird nur im selben Baum aufgelöst. Ein Button im Shadow Root kann kein Formular im Light DOM über dessen id erreichen.
Auch Buttons mit type="button" haben ein zugeordnetes Formular. Sie schicken es nur nicht automatisch ab.
Diese Eigenschaft wird von allen Browsern seit Langem unterstützt. Das form-Attribut für Elemente außerhalb des Formulars funktioniert in allen modernen Browsern, aber nicht im Internet Explorer.

Siehe auch

Element.closest() HTMLButtonElement.command HTMLButtonElement.name HTMLButtonElement.type HTMLButtonElement.value