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'attributtype
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.
<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