Dokumentation: 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
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.
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, mit einer Länge von null.
Beispiele
Abrufen von Formularinformationen
<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
<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-Formulare
<form>
und dasHTMLFormElement
Interface