Document : propriété forms

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juin 2018.

La propriété en lecture seule forms de l'interface Document retourne une collection (HTMLCollection) listant tous les éléments HTML <form> contenus dans le document.

Note : De même, vous pouvez accéder à une liste des éléments d'entrée utilisateur·ice d'un formulaire à l'aide de la propriété HTMLFormElement.elements.

Vous pouvez également accéder aux éléments <form> nommés en tant que propriétés de l'objet document. Par exemple, document["login-form"] et document.forms["login-form"] peuvent tous deux être utilisés pour accéder au formulaire nommé login-form.

Attention : S'appuyer sur le modèle document["form-name"] est dangereux et déconseillé car cela peut entraîner des conflits inattendus avec les API existantes ou futures du navigateur. Par exemple, si un navigateur introduit une propriété intégrée document["login-form"] à l'avenir, votre code pourrait ne plus être en mesure d'accéder à l'élément de formulaire. Pour éviter de tels conflits, utilisez toujours document.forms pour accéder aux formulaires nommés.

<form id="robby">
  <input type="button" value="formulaire de robby" />
</form>

<form id="dave">
  <input type="button" value="formulaire de dave" />
</form>

<form id="paul">
  <input type="button" value="formulaire de paul" />
</form>

document.querySelectorAll("input[type=button]").forEach((button, i) => {
  button.addEventListener("click", (event) => {
    console.log(document.forms[i].id);
  });
});

Accéder à un élément contenu dans un formulaire

const selectForm = document.forms[index];
const selectFormElement = document.forms[index].elements[index];

Accéder aux formulaires nommés

html

<form name="login">
  <input name="email" type="email" />
  <input name="password" type="password" />
  <button type="submit">Se connecter</button>
</form>

const loginForm = document.forms.login; // Ou document.forms['login']
loginForm.elements.email.placeholder = "test@exemple.com";
loginForm.elements.password.placeholder = "mot de passe";