HTMLFormElement.elements

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.

La propriété elements, rattachée à l'interface HTMLFormElement, renvoie un objet HTMLFormControlsCollection qui liste l'ensemble des contrôles de formulaire contenu dans l'élément <form>.

Si besoin d'obtenir uniquement le nombre de contrôles du formulaire, on pourra utiliser la propriété length.

On peut accéder à un contrôle particulier du formulaire via la collection renvoyée en utilisant l'indice ou l'attribut name ou id de l'élément.

Avant HTML 5, l'objet renvoyé était un objet HTMLCollection, sur lequel HTMLFormControlsCollection est désormais basé.

Note : De la même façon, on peut obtenir la liste de tous les formulaires contenus dans un document donné en utilisant la propriété forms.

Valeur

Un objet HTMLFormControlsCollection contenant tous les contrôles du formulaire qui ne sont pas des images. Il s'agit d'une collection dynamique, si des contrôles sont ajoutés ou retirés du formulaire, cette collection sera mise à jour afin de refléter cette modification.

Les contrôles de formulaires de la collection renvoyée sont dans le même ordre que celui selon lequel ils apparaissent dans le formulaire selon un parcours préfixe en profondeur de l'arbre, appelé ordre de l'arbre.

Seuls les éléments suivants sont renvoyés :

<button>
<fieldset>
<input> (exception faite des éléments dont l'attribut type vaut "image", pour des raisons historiques)
<object>
<output>
<select>
<textarea>

Exemples

Utilisation basique de la syntaxe

Dans cet exemple, on voit comment obtenir la liste des contrôles d'un formulaire et comment accéder à ses éléments avec un indice, un nom ou un identifiant.

html

<form id="mon-formulaire">
  <input type="text" name="username" />
  <input type="text" name="full-name" />
  <input type="password" name="password" />
</form>

const inputs = document.getElementById("mon-formulaire").elements;
const inputByIndex = inputs[0];
const inputByName = inputs["username"];

Accéder aux contrôles du formulaire

Dans cet exemple, on récupère la liste des éléments du formulaire, qu'on parcourt à la recherche d'éléments <input> de type "text" afin de pouvoir modifier leur valeur.

const inputs = document.getElementById("mon-formulaire").elements;

// On parcourt les contrôles du formulaire
for (let i = 0; i < inputs.length; i++) {
  if (inputs[i].nodeName === "INPUT" && inputs[i].type === "text") {
    // On met à jour le champ texte
    inputs[i].value.toLocaleUpperCase();
  }
}

Désactiver des contrôles de formulaire

const inputs = document.getElementById("mon-formulaire").elements;

// On parcourt les contrôles du formulaire
for (let i = 0; i < inputs.length; i++) {
  // On les désactive tous
  inputs[i].setAttribute("disabled", "");
}

Spécifications

Specification
HTML Standard # dom-form-elements-dev

Compatibilité des navigateurs

BCD tables only load in the browser