Dokument: forms-Eigenschaft

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since June 2018.

Die forms schreibgeschützte Eigenschaft des Document-Interfaces gibt eine HTMLCollection zurück, die alle im Dokument enthaltenen <form>-Elemente auflistet.

Hinweis: Ebenso können Sie eine Liste der Benutzereingabeelemente eines Formulars mit der Eigenschaft HTMLFormElement.elements abrufen.

Benannte <form>-Elemente werden auch als Eigenschaften des document-Objekts selbst zugänglich gemacht. Zum Beispiel können sowohl document["login-form"] als auch document.forms["login-form"] auf das Formular mit dem Namen login-form zugreifen. Sich auf dieses Verhalten zu verlassen, ist riskant und wird nicht empfohlen. Es kann zu unerwarteten Konflikten mit einigen bestehenden oder zukünftigen APIs im Browser führen. Wenn beispielsweise Browser eine neue document-Eigenschaft mit demselben Namen wie Ihr Formular einführen, kann derselbe Code nicht mehr auf das Formularelement zugreifen. Verwenden Sie stattdessen immer document.forms.

Wert

Ein HTMLCollection-Objekt, das alle Formulare des Dokuments auflistet. Jedes Element in der Sammlung ist ein HTMLFormElement, das ein einzelnes <form>-Element darstellt.

Wenn das Dokument keine Formulare enthält, ist die zurückgegebene Sammlung leer und hat eine Länge von null.

Beispiele

Formularinformationen abrufen

html
<form id="robby">
  <input type="button" value="robby's form" />
</form>

<form id="dave">
  <input type="button" value="dave's form" />
</form>

<form id="paul">
  <input type="button" value="paul's form" />
</form>
js
document.querySelectorAll("input[type=button]").forEach((button, i) => {
  button.addEventListener("click", (event) => {
    console.log(document.forms[i].id);
  });
});

Ein Element innerhalb eines Formulars abrufen

js
const selectForm = document.forms[index];
const selectFormElement = document.forms[index].elements[index];

Zugriff auf benannte Formulare

html
<form name="login">
  <input name="email" type="email" />
  <input name="password" type="password" />
  <button type="submit">Log in</button>
</form>
js
const loginForm = document.forms.login; // Or document.forms['login']
loginForm.elements.email.placeholder = "test@example.com";
loginForm.elements.password.placeholder = "password";

Spezifikationen

Specification
HTML
# dom-document-forms-dev

Browser-Kompatibilität

Siehe auch