HTMLTextAreaElement.form — Eigenschaft · JavaScript-Referenz

Signatur

HTMLTextAreaElement.form

Beschreibung

Die Eigenschaft form eines HTMLTextAreaElement verweist auf das Formular, dem das <textarea> zugeordnet ist. Das ist entweder das umschließende <form>-Element oder – wenn das Attribut form="id" gesetzt ist – das Formular mit dieser ID, auch wenn es an einer ganz anderen Stelle im Dokument steht.

Gehört das Element zu keinem Formular, etwa weil es frei im Dokument steht oder das form-Attribut auf eine nicht vorhandene ID zeigt, ist der Wert null.

Nützlich ist die Eigenschaft vor allem in Event-Handlern: Aus einem input- oder keydown-Handler kommt man über event.target.form direkt an das Formular. So kann man es absenden (requestSubmit()), zurücksetzen oder andere Felder über form.elements lesen, ohne das Formular erst per Selektor zu suchen.

Die Eigenschaft ist schreibgeschützt. Um die Zuordnung zu ändern, setzt man das HTML-Attribut form mit setAttribute('form', 'andereId').

Rückgabewert

Typ

HTMLFormElement | null

Beschreibung

Das zugeordnete Formular-Element oder null, wenn das <textarea> keinem Formular angehört.

Beispiele

Zugehöriges Formular ermitteln

// <form id="kontakt"><textarea id="nachricht"></textarea></form>
const textarea = document.querySelector('#nachricht');
console.log(textarea.form?.id);

// Ein freistehendes textarea gehört zu keinem Formular
const frei = document.createElement('textarea');
document.body.append(frei);
console.log(frei.form);

kontakt null

Mit Strg+Enter absenden

// <form id="kommentar"><textarea name="text"></textarea><button>Senden</button></form>
document.querySelector('textarea[name="text"]').addEventListener('keydown', (event) => {
  if (event.key === 'Enter' && (event.ctrlKey || event.metaKey)) {
    event.preventDefault();
    // requestSubmit() prüft die Eingaben und löst das submit-Event aus
    event.target.form?.requestSubmit();
  }
});

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

// <form id="feedback"></form>
// <textarea id="notiz" form="feedback" name="notiz"></textarea>
const notiz = document.querySelector('#notiz');
console.log(notiz.form === document.getElementById('feedback'));

// Zuordnung ändern: nur über das Attribut möglich
notiz.setAttribute('form', 'gibtEsNicht');
console.log(notiz.form);

notiz.form = document.forms[0]; // wird ignoriert (im strict mode: TypeError)
console.log(notiz.form);

true null null

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung an textarea.form wird im nicht-strikten Modus stillschweigend ignoriert. In Modulen und im strict mode löst sie einen TypeError aus, weil nur ein Getter existiert. Die Zuordnung ändert man über setAttribute('form', id).
Zeigt das form-Attribut auf eine ID, die es nicht gibt, ist der Wert null, auch wenn das Element in einem <form> steht. Das Attribut hat immer Vorrang vor dem umschließenden Formular.
Verschachtelte <form>-Elemente sind in HTML ungültig. Der Parser verwirft das innere Formular, deshalb kann das Ergebnis dann unerwartet sein.
Nicht verwechseln mit dem Attribut: getAttribute('form') liefert die ID als Text, die Eigenschaft form dagegen das Element selbst.
Nutze wegen des möglichen null den optionalen Verkettungsoperator (textarea.form?.submit()).
Die Eigenschaft wird von allen Browsern unterstützt. Das form-Attribut für Elemente außerhalb des Formulars gibt es seit HTML5; nur der alte Internet Explorer unterstützt es nicht.

Siehe auch

BeforeInstallPromptEvent.platforms HTMLOptionElement.form HTMLTextAreaElement.cols HTMLTextAreaElement.rows HTMLTextAreaElement.name