HTMLInputElement.form — Eigenschaft · JavaScript-Referenz

Signatur

HTMLInputElement.form

Beschreibung

Die schreibgeschützte Eigenschaft form liefert eine Referenz auf das Formular, das dieses <input>-Element besitzt. Das ist entweder das umschließende <form>-Element oder – falls das Input ein form-Attribut trägt – das Formular mit der dort angegebenen id, egal wo es im Dokument steht.

Nützlich ist die Eigenschaft vor allem in Event-Handlern: Aus einem input- oder change-Event heraus kommt man über event.target.form direkt an das Formular, ohne closest('form') oder globale Selektoren. So lassen sich etwa andere Felder über form.elements abfragen, das Formular validieren oder per requestSubmit() absenden.

Ist das Element keinem Formular zugeordnet (steht außerhalb eines <form> und hat kein gültiges form-Attribut), ist der Wert null. Die Eigenschaft lässt sich nicht direkt setzen; um die Zuordnung zu ändern, setzt man das HTML-Attribut per setAttribute('form', id).

Rückgabewert

Typ

HTMLFormElement | null

Beschreibung

Das zugehörige HTMLFormElement oder null, wenn das Input keinem Formular angehört.

Beispiele

Zugehöriges Formular ermitteln

// HTML: <form id="login"><input id="user" name="user"></form>
//       <input id="lose">
const user = document.getElementById('user');
const lose = document.getElementById('lose');

console.log(user.form.id);
console.log(lose.form);

login null

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

// HTML: <form id="suche"></form>
//       <input id="q" name="q" form="suche">
const q = document.getElementById('q');
console.log(q.form?.id);

// Zuordnung nachträglich ändern (form selbst ist schreibgeschützt)
q.setAttribute('form', 'gibt-es-nicht');
console.log(q.form);

suche null

Im Event-Handler auf andere Felder zugreifen

// HTML: <form id="reg"><input name="pw" type="password">
//       <input name="pw2" type="password"></form>
document.querySelector('#reg').addEventListener('input', (event) => {
  const { form } = event.target;
  if (!form) return;
  const { pw, pw2 } = form.elements;
  pw2.setCustomValidity(pw.value === pw2.value ? '' : 'Passwörter stimmen nicht überein');
});

Formular per Enter-Taste im Feld absenden

const feld = document.querySelector('input[name="q"]');
feld.addEventListener('keydown', (event) => {
  if (event.key === 'Enter' && feld.form) {
    event.preventDefault();
    // requestSubmit löst Validierung und submit-Event aus
    feld.form.requestSubmit();
  }
});

// Wichtig · Fallstricke

Schreibgeschützt: input.form = otherForm wird ignoriert (im Strict Mode TypeError). Zuordnung nur über das Attribut form ändern.
Immer auf null prüfen: Felder außerhalb eines Formulars oder mit ungültiger form-ID liefern null – optionales Chaining (input.form?.submit()) verhindert Laufzeitfehler.
Verschachtelte Formulare sind in HTML ungültig; der Parser verwirft das innere <form>, sodass form auf das äußere zeigt. Per DOM-Manipulation erzeugte Verschachtelungen können überraschende Zuordnungen ergeben.
Nicht mit closest('form') verwechseln: Das berücksichtigt das form-Attribut nicht.
Die Eigenschaft wird von allen Browsern unterstützt; das form-Attribut (Zuordnung außerhalb) funktioniert in allen modernen Browsern, nicht aber im Internet Explorer.
Gleiche Eigenschaft existiert auch bei HTMLButtonElement, HTMLSelectElement, HTMLTextAreaElement, HTMLOutputElement u. a.

Siehe auch

Element.closest() HTMLInputElement.formAction HTMLInputElement.src HTMLInputElement.alt HTMLInputElement.files