HTMLObjectElement.form — Eigenschaft · JavaScript-Referenz

Signatur

HTMLObjectElement.form

Beschreibung

Die schreibgeschützte Eigenschaft form der Schnittstelle HTMLObjectElement gibt das Formular zurück, dem ein <object>-Element zugeordnet ist. <object> zählt in HTML zu den formularzugehörigen Elementen (form-associated elements), genau wie <input>, <select> oder <output>. Deshalb taucht es auch in der Sammlung form.elements auf.

Die Zuordnung entsteht auf zwei Wegen:

Verschachtelung: Das <object> steht innerhalb eines <form>-Elements.
Attribut form: Das Element verweist über form="formular-id" auf ein Formular, das irgendwo im selben Dokument steht. Das Attribut hat Vorrang vor der Verschachtelung.

Praktisch ist die Eigenschaft, wenn man von einem eingebetteten Inhalt (z. B. einem Plugin-Ersatz, PDF oder SVG) zum umgebenden Formular kommen will, etwa um Formulardaten zu lesen oder Event-Listener zu registrieren. Findet der Browser kein passendes Formular (auch nicht bei einer ungültigen ID im form-Attribut), ist der Wert null.

Rückgabewert

Typ

HTMLFormElement | null

Beschreibung

Das zugeordnete HTMLFormElement oder null, wenn das <object> zu keinem Formular gehört.

Beispiele

Formular über Verschachtelung ermitteln

// HTML:
// <form id="upload" name="uploadForm">
//   <object id="vorschau" data="vorschau.svg" type="image/svg+xml"></object>
// </form>

const obj = document.getElementById('vorschau');
const form = obj.form;

console.log(form instanceof HTMLFormElement);
console.log(form?.id);

true upload

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

// HTML:
// <form id="bestellung"></form>
// ...
// <object id="katalog" data="katalog.pdf" type="application/pdf" form="bestellung"></object>

const katalog = document.querySelector('#katalog');
console.log(katalog.form?.id);

// Auch in form.elements enthalten:
const elemente = [...document.forms.bestellung.elements];
console.log(elemente.includes(katalog));

bestellung true

Kein Formular – sicherer Umgang mit null

const obj = document.createElement('object');
obj.data = 'grafik.svg';
document.body.append(obj);

console.log(obj.form); // nicht in einem Formular

// Defensiv auf das Formular reagieren
const form = obj.form;
if (form) {
  form.addEventListener('submit', () => console.log('Formular wird gesendet'));
} else {
  console.log('Kein zugehöriges Formular gefunden');
}

null Kein zugehöriges Formular gefunden

Zuordnung zur Laufzeit per setAttribute ändern

// HTML: <form id="a"></form> <form id="b"></form> <object id="o" form="a"></object>
const o = document.getElementById('o');
console.log(o.form.id);

// obj.form = ... funktioniert NICHT, Attribut setzen:
o.setAttribute('form', 'b');
console.log(o.form.id);

o.setAttribute('form', 'gibt-es-nicht');
console.log(o.form);

a b null

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung wie obj.form = otherForm wird ignoriert (im Strict Mode gibt es einen TypeError). Ändern lässt sich die Zuordnung nur über setAttribute('form', id) oder durch Verschieben des Elements im DOM.
Ungültige ID: Verweist das form-Attribut auf eine ID, die es nicht gibt oder die kein <form> ist, liefert die Eigenschaft null, auch wenn das Element eigentlich in einem Formular verschachtelt ist.
Nicht absendbar: <object> ist zwar formularzugehörig und steht in form.elements, trägt aber in modernen Browsern keine Daten zu FormData oder zur Formularübermittlung bei. Früher war das für Plugins vorgesehen, die sind aber abgeschafft.
Kompatibilität: Wird von allen aktuellen Browsern unterstützt. Das form-Attribut für Verweise außerhalb des Formulars gibt es erst seit HTML5, sehr alte Browser (IE ≤ 11) werten es nicht aus.
Nimm immer optionale Verkettung (obj.form?.id) oder eine Prüfung auf null, damit kein TypeError auftritt.

Siehe auch

Document.forms HTMLLegendElement.form HTMLObjectElement.data HTMLObjectElement.name HTMLObjectElement.type