HTMLFormElement: elements-Eigenschaft
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Die Eigenschaft elements
des HTMLFormElement
gibt eine HTMLFormControlsCollection
zurück, die alle in dem <form>
-Element enthaltenen Formularsteuerelemente auflistet.
Unabhängig davon können Sie die Anzahl der Formularsteuerelemente mithilfe der length
-Eigenschaft ermitteln.
Sie können auf ein bestimmtes Formularsteuerelement in der zurückgegebenen Sammlung zugreifen, indem Sie entweder einen Index oder die name
- oder id
-Attribute des Elements verwenden.
Vor HTML5 war das zurückgegebene Objekt eine HTMLCollection
, auf der HTMLFormControlsCollection
basiert.
Hinweis: Ebenso können Sie eine Liste aller in einem bestimmten Dokument enthaltenen Formulare über die forms
-Eigenschaft des Dokuments erhalten.
Wert
Eine HTMLFormControlsCollection
, die alle Nicht-Bild-Steuerelemente im Formular enthält. Dies ist eine Live-Sammlung; wenn Formularsteuerelemente zum Formular hinzugefügt oder daraus entfernt werden, wird diese Sammlung aktualisiert, um die Änderung widerzuspiegeln.
Die Formularsteuerelemente in der zurückgegebenen Sammlung sind in derselben Reihenfolge, in der sie im Formular erscheinen, indem eine Preorder-Tiefensuche der Baumstruktur erfolgt. Dies wird als Baumordnung bezeichnet.
Nur die folgenden Elemente werden zurückgegeben:
<button>
<fieldset>
<input>
(mit der Ausnahme, dass aus historischen Gründen alle mittype
"image"
ausgelassen werden)<object>
<output>
<select>
<textarea>
- formularassoziierte benutzerdefinierte Elemente
Beispiele
Schnelles Syntaxbeispiel
In diesem Beispiel sehen wir, wie man die Liste der Formularsteuerelemente erhält und wie man auf deren Mitglieder über Index und über Namen oder ID zugreift.
<form id="my-form">
<label>
Username:
<input type="text" name="username" />
</label>
<label>
Full name:
<input type="text" name="full-name" />
</label>
<label>
Password:
<input type="password" name="password" />
</label>
</form>
const inputs = document.getElementById("my-form").elements;
const inputByIndex = inputs[0];
const inputByName = inputs["username"];
Zugriff auf Formularsteuerelemente
Dieses Beispiel erhält die Elementliste des Formulars und durchläuft dann die Liste, um <input>
-Elemente vom Typ "text"
zu suchen, sodass eine Verarbeitung an ihnen durchgeführt werden kann.
const inputs = document.getElementById("my-form").elements;
// Iterate over the form controls
for (let i = 0; i < inputs.length; i++) {
if (inputs[i].nodeName === "INPUT" && inputs[i].type === "text") {
// Update text input
inputs[i].value.toLocaleUpperCase();
}
}
Deaktivieren von Formularsteuerelementen
const inputs = document.getElementById("my-form").elements;
// Iterate over the form controls
for (let i = 0; i < inputs.length; i++) {
// Disable all form controls
inputs[i].setAttribute("disabled", "");
}
Spezifikationen
Specification |
---|
HTML Standard # dom-form-elements-dev |
Browser-Kompatibilität
BCD tables only load in the browser