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
<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);
});
});
Ein Element innerhalb eines Formulars abrufen
const selectForm = document.forms[index];
const selectFormElement = document.forms[index].elements[index];
Zugriff auf benannte Formulare
<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";
Spezifikationen
Specification |
---|
HTML # dom-document-forms-dev |
Browser-Kompatibilität
Siehe auch
- HTML Forms
<form>
und dasHTMLFormElement
-Interface