Dokumentation: forms Eigenschaft

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juni 2018 browserübergreifend verfügbar.

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

Hinweis: Ebenso können Sie auf eine Liste der Benutzereingabe-Elemente einer Formular-Komponente über die HTMLFormElement.elements Eigenschaft zugreifen.

Sie können auch auf benannte <form>-Elemente als Eigenschaften des document-Objekts zugreifen. Zum Beispiel können sowohl document["login-form"] als auch document.forms["login-form"] verwendet werden, um auf das Formular mit dem Namen login-form zuzugreifen.

Warnung: Das Verlassen auf das Muster document["form-name"] ist gefährlich und wird nicht empfohlen, da es zu unerwarteten Konflikten mit bestehenden oder zukünftigen APIs im Browser führen kann. Zum Beispiel, wenn ein Browser in Zukunft eine eingebaute document["login-form"]-Eigenschaft einführt, kann Ihr Code möglicherweise nicht mehr auf das Formularelement zugreifen. Um solche Konflikte zu vermeiden, verwenden Sie immer document.forms, um auf benannte Formulare zuzugreifen.

<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>

document.querySelectorAll("input[type=button]").forEach((button, i) => {
  button.addEventListener("click", (event) => {
    console.log(document.forms[i].id);
  });
});

Abrufen eines Elements innerhalb eines Formulars

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>

const loginForm = document.forms.login; // Or document.forms['login']
loginForm.elements.email.placeholder = "test@example.com";
loginForm.elements.password.placeholder = "password";