HTMLOutputElement.form — Eigenschaft · JavaScript-Referenz

Signatur

HTMLOutputElement.form

Beschreibung

Die Eigenschaft form eines HTMLOutputElement gibt das Formular zurück, das dieses <output>-Element besitzt (englisch „form owner“). Ist das Element keinem Formular zugeordnet, ist der Wert null.

Wie das Formular bestimmt wird:

Hat das <output> ein form-Attribut, wird das Formular mit dieser id im selben Dokument verwendet – auch wenn das Element außerhalb des <form> steht.
Ohne Attribut ist es das nächstgelegene umschließende <form>-Element.
Verweist das Attribut auf eine nicht existierende id oder auf ein Element, das kein Formular ist, ergibt sich null.

Praktisch ist die Eigenschaft, wenn man in einem Event-Handler vom Ausgabefeld aus auf das zugehörige Formular und dessen andere Steuerelemente (form.elements) zugreifen will, ohne die DOM-Struktur fest zu verdrahten. So lassen sich wiederverwendbare Berechnungsfunktionen schreiben, die für mehrere Formulare auf einer Seite funktionieren.

Rückgabewert

Typ

HTMLFormElement | null

Beschreibung

Das besitzende HTMLFormElement oder null, wenn das <output> keinem Formular zugeordnet ist.

Beispiele

Zugehöriges Formular ermitteln

// HTML:
// <form id="rechner">
//   <input name="a" type="number" value="2"> +
//   <input name="b" type="number" value="3"> =
//   <output name="ergebnis" id="ergebnis"></output>
// </form>

const output = document.getElementById('ergebnis');
console.log(output.form);
console.log(output.form.id);

<form id="rechner">…</form> rechner

Output außerhalb des Formulars per form-Attribut

// HTML:
// <form id="bestellung">
//   <input name="menge" type="number" value="4">
//   <input name="preis" type="number" value="2.5">
// </form>
// <output id="summe" form="bestellung" for="menge preis"></output>
// <output id="lose"></output>

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

console.log(summe.form?.id); // trotz Position außerhalb zugeordnet
console.log(lose.form);      // keinem Formular zugeordnet

bestellung null

Wiederverwendbare Berechnung über output.form

// Funktioniert für beliebig viele Formulare mit Feldern a, b und output[name=ergebnis]
const aktualisiere = (output) => {
  const form = output.form;
  if (!form) return; // ohne Formular nichts zu tun
  const a = form.elements.a.valueAsNumber || 0;
  const b = form.elements.b.valueAsNumber || 0;
  output.value = String(a + b);
};

document.querySelectorAll('output[name="ergebnis"]').forEach((output) => {
  output.form?.addEventListener('input', () => aktualisiere(output));
  aktualisiere(output);
});

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung wie output.form = otherForm wird ignoriert (im Strict Mode ggf. TypeError). Um die Zuordnung zu ändern, das Attribut setzen: output.setAttribute('form', 'andereId').
Nicht verwechseln: die Eigenschaft form liefert ein Objekt, das HTML-Attribut form dagegen eine id-Zeichenkette. Den Attributwert erhält man mit getAttribute('form').
Verweist das form-Attribut auf eine unbekannte id, ist der Wert null – selbst wenn das Element in einem <form> verschachtelt ist.
<output> wird zwar in form.elements aufgeführt, sein Wert wird beim Absenden aber nicht übertragen.
Kompatibilität: wird von allen modernen Browsern unterstützt; der Internet Explorer kennt <output> nicht.

Siehe auch

HTMLObjectElement.form HTMLOutputElement.name HTMLOutputElement.type HTMLOutputElement.htmlFor HTMLOutputElement.value