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 mit type "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.

html

<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