HTMLFormElement.length — Eigenschaft · JavaScript-Referenz

Signatur

get HTMLFormElement.length

Beschreibung

HTMLFormElement.length gibt die Anzahl der Steuerelemente zurück, die zum Formular gehören. Der Wert entspricht immer form.elements.length, also der Länge der HTMLFormControlsCollection des Formulars. Die Eigenschaft ist schreibgeschützt; eine Zuweisung wird ignoriert (im Strict Mode wirft sie einen TypeError).

Gezählt werden die sogenannten listed elements: <button>, <fieldset>, <input>, <object>, <output>, <select>, <textarea> sowie formularassoziierte Custom Elements. Nicht gezählt werden <input type="image">, <label>, <option> und beliebige andere Elemente. Auch deaktivierte (disabled) und versteckte (type="hidden") Felder zählen mit.

Wichtig: Maßgeblich ist die Formularzugehörigkeit, nicht die Position im DOM. Ein Feld außerhalb des <form>, das per form="id"-Attribut zugeordnet ist, wird mitgezählt; ein Feld innerhalb, das per form-Attribut einem anderen Formular zugeordnet ist, dagegen nicht.

Typische Einsatzzwecke sind das Iterieren über alle Felder per Index, Validierungs- oder Debug-Ausgaben und die Prüfung, ob dynamisch hinzugefügte Felder angekommen sind. Der Wert ist „live“ und ändert sich sofort, wenn Steuerelemente hinzugefügt oder entfernt werden.

Rückgabewert

Typ

number

Beschreibung

Ganzzahl ≥ 0: Anzahl der Steuerelemente, die dem Formular zugeordnet sind (entspricht form.elements.length).

Beispiele

Anzahl der Formularfelder ermitteln

// HTML:
// <form id="kontakt">
//   <input name="name">
//   <input name="email" type="email">
//   <input type="hidden" name="token" value="abc">
//   <textarea name="nachricht"></textarea>
//   <label>Hinweis</label>
//   <input type="image" src="senden.png" alt="Senden">
//   <button type="submit">Senden</button>
// </form>

const form = document.getElementById('kontakt');
console.log(form.length);          // label und input[type=image] zählen nicht
console.log(form.length === form.elements.length);

5 true

Per Index über alle Felder iterieren

const form = document.querySelector('#kontakt');

for (let i = 0; i < form.length; i++) {
  const feld = form[i]; // Indexzugriff direkt am Formular möglich
  console.log(`${i}: ${feld.tagName.toLowerCase()} name="${feld.name}"`);
}

0: input name="name" 1: input name="email" 2: input name="token" 3: textarea name="nachricht" 4: button name=""

Live-Wert beim dynamischen Hinzufügen und externe Felder per form-Attribut

const form = document.createElement('form');
form.id = 'bestellung';
document.body.append(form);
console.log(form.length); // 0

const menge = document.createElement('input');
menge.name = 'menge';
form.append(menge);
console.log(form.length); // 1

// Feld außerhalb des <form>, aber per form-Attribut zugeordnet
const extern = document.createElement('input');
extern.name = 'gutschein';
extern.setAttribute('form', 'bestellung');
document.body.append(extern);
console.log(form.length); // 2

menge.remove();
console.log(form.length); // 1

0 1 2 1

// Wichtig · Fallstricke

Verdeckung durch Feldnamen: Formulare stellen ihre Felder als benannte Eigenschaften bereit und diese haben Vorrang vor eingebauten Eigenschaften. Enthält das Formular ein Feld mit name="length" oder id="length", liefert form.length dieses Element statt einer Zahl. Robuster ist dann form.elements.length – wobei auch elements durch ein Feld name="elements" verdeckt werden kann. Solche Namen also am besten vermeiden.
<input type="image"> wird aus historischen Gründen nie mitgezählt und ist auch nicht über form.elements erreichbar.
Radio-Buttons zählen einzeln, nicht als Gruppe: Drei Radios mit demselben name ergeben 3.
Die Eigenschaft ist schreibgeschützt: Anders als bei HTMLSelectElement.length lässt sich die Anzahl nicht durch Zuweisung ändern.
Kompatibilität: wird seit jeher von allen Browsern unterstützt. Die Zählung formularassoziierter Custom Elements (static formAssociated = true) setzt moderne Browser voraus.

Siehe auch

CSSUnparsedValue.length HTMLAllCollection.length HTMLFormElement.elements HTMLFormElement.enctype HTMLFormElement.method