Document.forms — Eigenschaft · JavaScript-Referenz

Signatur

get Document.forms

Beschreibung

document.forms gibt eine HTMLCollection mit allen <form>-Elementen des aktuellen Dokuments in Dokumentreihenfolge zurück. Jedes Element ist ein HTMLFormElement. Enthält das Dokument keine Formulare, ist die Sammlung leer (length === 0), aber niemals null.

Man kann auf einzelne Formulare über den Index (document.forms[0]), über item() oder über den Wert des id- bzw. name-Attributs zugreifen (document.forms.login, document.forms["login"], document.forms.namedItem("login")). Über die Eigenschaft elements eines Formulars gelangt man anschließend bequem an die einzelnen Formularfelder.

Die Sammlung ist live: Werden Formulare per DOM-Manipulation hinzugefügt oder entfernt, spiegelt sich das sofort in der Sammlung wider. Das ist praktisch, kann aber beim Iterieren und gleichzeitigen Verändern des DOM zu Überraschungen führen.

Die Eigenschaft eignet sich besonders für schnelle, selektorfreie Zugriffe auf benannte Formulare, etwa in Legacy-Code, Bookmarklets oder kleinen Skripten. In modernem Code ist document.querySelector("form#id") oft gleichwertig, document.forms ist aber kürzer und semantisch eindeutig.

Rückgabewert

Typ

HTMLCollection<HTMLFormElement>

Beschreibung

Eine live aktualisierte HTMLCollection aller <form>-Elemente im Dokument, zugreifbar per Index, id oder name. Bei fehlenden Formularen eine leere Sammlung.

Beispiele

Anzahl der Formulare und Zugriff per Index

// HTML: <form id="suche"></form> <form name="login"></form>
const forms = document.forms;
console.log(forms.length);
console.log(forms[0].id);
console.log(forms.item(1).name);

2 suche login

Benanntes Formular auslesen und absenden abfangen

// HTML:
// <form name="login">
//   <input name="user" value="anna">
//   <input name="pass" type="password" value="geheim">
//   <button>Anmelden</button>
// </form>
const loginForm = document.forms.login; // oder document.forms["login"]

loginForm.addEventListener("submit", async (event) => {
  event.preventDefault();
  const { user } = loginForm.elements;
  console.log(`Anmeldung für: ${user.value}`);

  const data = new FormData(loginForm);
  await fetch("/api/login", { method: "POST", body: data });
});

Anmeldung für: anna

Alle Formulare iterieren und zurücksetzen

// HTMLCollection ist kein Array – mit for...of oder Array.from iterieren
for (const form of document.forms) {
  form.reset();
}

const ids = Array.from(document.forms, (f) => f.id || "(ohne id)");
console.log(ids);

["suche", "(ohne id)"]

Live-Verhalten der Sammlung

const forms = document.forms;
console.log(forms.length); // z. B. 0

const neu = document.createElement("form");
neu.name = "kontakt";
document.body.append(neu);

// Die bereits referenzierte Sammlung ist automatisch aktualisiert
console.log(forms.length);
console.log(forms.kontakt === neu);

0 1 true

// Wichtig · Fallstricke

Schreibgeschützt: Eine Zuweisung an document.forms wird ignoriert (im Strict Mode ggf. TypeError). Formulare fügt man per DOM-Methoden wie append() hinzu.
Kein Array: HTMLCollection besitzt kein map(), filter() oder forEach(). Vorher mit Array.from() oder Spread-Syntax ([...document.forms]) umwandeln; for...of funktioniert direkt.
Live-Sammlung: Wer beim Iterieren Formulare entfernt, überspringt Einträge. In diesem Fall zuerst eine statische Kopie per Array.from() anlegen.
Namenskonflikte: Heißt ein Formular z. B. name="length" oder name="item", wird es von den eingebauten Eigenschaften überdeckt. Sicherer ist dann namedItem(). Mehrere Formulare mit gleichem Namen liefern beim Namenszugriff nur das erste.
Timing: Wird das Skript im <head> ohne defer ausgeführt, sind die Formulare noch nicht geparst und die Sammlung ist leer. Skript mit defer laden oder auf DOMContentLoaded warten.
Formulare in <iframe>s oder Shadow-DOM-Bäumen sind nicht enthalten; für iframes iframe.contentDocument.forms verwenden (nur bei gleicher Herkunft).
Die Eigenschaft wird von allen Browsern seit jeher unterstützt.

Siehe auch

Document.images Document.links Document.fonts Document.URL Document.body