HTMLFormElement: elements-Eigenschaft

Wert

Eine HTMLFormControlsCollection, die alle Nicht-Bild-Steuerelemente enthält, die mit dem Formular verknüpft sind. Dies ist eine Live-Sammlung; wenn Formularsteuerelemente dem Formular hinzugefügt oder daraus entfernt werden, aktualisiert sich diese Sammlung, um die Änderung widerzuspiegeln.

Die Formularsteuerelemente in der zurückgegebenen Sammlung sind in der Reihenfolge, in der sie im Dokument erscheinen, entsprechend einer Vororder-, Tiefensuche des Baumes. Dies wird als Baumordnung bezeichnet.

Nur die folgenden Formularsteuerelemente werden zurückgegeben:

• <button>
• <fieldset>
• <input> (mit der Ausnahme, dass alle, deren type "image" ist, aus historischen Gründen weggelassen werden)
• <object>
• <output>
• <select>
• <textarea>
• formularassoziierte benutzerdefinierte Elemente

Beispiele

Schnelles Syntaxbeispiel

In diesem Beispiel sehen wir, wie Sie die Liste der Formularsteuerelemente erhalten sowie auf deren Mitglieder über einen Index oder einen Namen oder eine ID zugreifen können.

<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"];

Zugeordnete Formularsteuerelemente

Dieses Beispiel demonstriert, wie die HTMLFormControlsCollection die mit dem Formular verknüpften Formularsteuerelemente enthält, anstatt der physisch im <form>-Element verschachtelten Steuerelemente.

Das erste Formular ist vollständig und enthält vier Formularsteuerelemente: ein <fieldset> und drei <input>-Elemente. Die <legend>- und <label>-Elemente sind keine aufgelisteten Formularsteuerelemente. Das zweite Formular ist spärlich und hat nur ein verschachteltes Formularsteuerelement: ein einzelnes <object>-Element. Alle Formularsteuerelemente im vollständigen Formular sind über ihr form-Attribut mit dem spärlichen Formular verbunden.

<form id="fullForm">
  This form looks full, but it has no associated form controls
  <fieldset form="sparseForm">
    <legend>This is a legend</legend>
    <label>A form control: <input form="sparseForm" /></label>
    <label>Another form control: <input form="sparseForm" /></label>
    <label>Yet another form control: <input form="sparseForm" /></label>
  </fieldset>
</form>

<form id="sparseForm">
  <object>Lone form control</object>
</form>

Wir verwenden die elements-Eigenschaft, um die HTMLFormControlsCollection für jedes Formular zu erhalten.

const sparse = document.getElementById("sparseForm").elements;
const full = document.getElementById("fullForm").elements;

Die Sammlung umfasst die dem Formular zugeordneten Formularsteuerelemente, das heißt alle <button>, <fieldset>, <input>, <object>, <output>, <select>, <textarea> und formularassoziierte benutzerdefinierte Elemente, die mit dem Formular verknüpft sind, selbst wenn diese Elemente in einem anderen Formular verschachtelt oder in keinem Formular verschachtelt sind.

console.log(`sparse form: ${sparse.length}`); // sparse form: 5
console.log(`full form: ${full.length}`); // full form: 0

Die Steuerelemente der Sammlung sind in der Reihenfolge, in der sie im Dokument erscheinen.

console.log(`first member: ${sparse[0].tagName}`); // first member: FIELDSET
console.log(`last member: ${sparse[sparse.length - 1].tagName}`); // last member: OBJECT

Zugriff auf Formularsteuerelemente

Dieses Beispiel ruft die Elementliste des Formulars ab und durchläuft dann die Liste, um nach <input>-Elementen des Typs "text" zu suchen, damit eine Form von Verarbeitung an ihnen durchgeführt werden kann.

const inputs = document.getElementById("my-form").elements;

// Iterate over the form controls
for (const input of inputs) {
  if (input.nodeName === "INPUT" && input.type === "text") {
    // Update text input
    input.value = input.value.toLocaleUpperCase();
  }
}

Deaktivieren von Formularsteuerelementen

const inputs = document.getElementById("my-form").elements;

// Iterate over the form controls
for (const input of inputs) {
  // Disable all form controls
  input.setAttribute("disabled", "");
}

Spezifikationen

Browser-Kompatibilität