HTMLFormElement: elements-Eigenschaft

Wert

Eine HTMLFormControlsCollection, die alle Nicht-Bild-Formularelemente enthlt, die mit dem Formular verknpft sind. Dies ist eine aktuelle Sammlung; wenn Formularelemente mit dem Formular verknpft oder davon getrennt werden, wird diese Sammlung aktualisiert, um die nderung widerzuspiegeln.

Die Formularelemente in der zurckgegebenen Sammlung sind in der gleichen Reihenfolge, in der sie im Dokument erscheinen, indem eine prvide, tiefen-first Durchlaufung des Baums gefolgt wird. Dies wird als Baumordnung bezeichnet.

Nur die folgenden Formularelemente werden zurckgegeben:

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

Beispiele

Schnelles Syntaxbeispiel

In diesem Beispiel sehen wir, wie man die Liste von Formularelementen erhlt und wie man auf seine Mitglieder per Index, Name 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"];

Assoziierte Formularelemente

Dieses Beispiel zeigt, wie die HTMLFormControlsCollection die mit dem Formular assoziierten Formularelemente enthlt, anstatt die physisch im <form> verschachtelten Elemente.

Das erste Formular ist voll, mit vier Formularelementen: ein <fieldset> und drei <input>-Elemente. Die <legend>- und <label>-Elemente sind keine aufgefhrten Formularelemente. Das zweite Formular ist sprlich, mit nur einem verschachtelten Formularelement: einem einzelnen <object>-Element. Alle Formularelemente im vollen Formular sind ber ihr form-Attribut mit dem sprlichen Formular assoziiert.

<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 data="lone-form-control.jpg">Lone form control</object>
</form>

Wir verwenden die elements-Eigenschaft, um die HTMLFormControlsCollection fr jedes Formular zu erhalten.

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

Die Sammlung umfasst die mit dem Formularelement verbundenen Formularelemente, das heit alle <button>, <fieldset>, <input>, <object>, <output>, <select>, <textarea> und formularassoziierten benutzerdefinierten Elemente, die mit dem Formular assoziiert 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 Formularsteuerungen der Sammlung sind in der gleichen 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 Formularelemente

Dieses Beispiel erhlt die Elementliste des Formulars und iteriert dann ber die Liste, um nach <input>-Elementen des Typs "text" zu suchen, damit einige Arten der Verarbeitung an ihnen durchgefhrt werden knnen.

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 Formularelementen

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-Kompatibilitt