Manipuler les formulaires en JavaScript

La dernière partie du DOM est consacrée aux formulaires. Ils fonctionnent sur le même principe que le reste du DOM mais ont certaines spécificités qui permettent d'interagir avec les champs et leurs valeurs.

Sélectionner un formulaire

Un formulaire HTML est sélectionné exactement comme tous les autres éléments du DOM :

avec document.querySelector()
avec document.getElementById()
avec document.getElementsByTagName()
avec document.getElementsByClassName()
...

let form = document.querySelector("form");

Écouter l'événement de soumission d'un formulaire

Lorsqu'un formulaire est soumis, quelle que soit la méthode de soumission (<input type="submit">, <button type="submit" ou touche Entrée) l'événement qui est déclenché est submit.

let form = document.querySelector("form");
form.addEventListener("submit", (event) => {
  
});

Le comportement par défaut du navigateur lorsqu'un formulaire est soumis est de recharger la page. Pour empêcher ça et pouvoir faire vos traitements, vous devez utiliser : event.preventDefault().

let form = document.querySelector("form");
form.addEventListener("submit", (event) => {
  event.preventDefault();
});

Récupérer les champs d'un formulaire

Pour récupérer les champs d'un formulaire, vous allez devoir utiliser leur attribut name. Lorsque l'objet représentant le formulaire est construit pour vous en JavaScript, tous les champs présents dans le formulaire sont placé dans la collection elements contenue dans l'objet.

Pour accéder à l'un de ces éléments il faut donc utiliser form.elements.nameOfTheElement.

<form id="test-form" action="" method="post">
    <input type="text" id="login_username" name="username" />
    <input type="password" id="login_password" name="password" />
    <button type="submit">Login</button>
</form>

let form = document.querySelector("#test-form");

form.addEventListener("submit", (event) => {
    event.preventDefault();
    
    console.log(event.target.elements.username);
    console.log(event.target.elements.password);
});

Récupérer la valeur d'un élément

Une fois que vous avez isolé un élément contenu dans le formulaire, vous pouvez accéder à la valeur du champ en utilisant value:

<form id="test-form" action="" method="post">
    <input type="text" id="login_username" name="username" />
    <input type="password" id="login_password" name="password" />
    <button type="submit">Login</button>
</form>

let form = document.querySelector("#test-form");

form.addEventListener("submit", (event) => {
    event.preventDefault();
    
    console.log(event.target.elements.username.value);
    console.log(event.target.elements.password.value);
});

Soumettre le formulaire vous-même après traitement

Parce que vous avez utilisé event.PreventDefault() le formulaire n'a pas été soumis et la page n'a pas été rechargée. Une fois que vous avez effectué votre traitement si vous en avez besoin vous pouvez forcer la soumission du formulaire avec submit().

<form id="test-form" action="" method="post">
    <input type="text" id="login_username" name="username" />
    <input type="password" id="login_password" name="password" />
    <button type="submit">Login</button>
</form>

let form = document.querySelector("#test-form");

form.addEventListener("submit", (event) => {
    event.preventDefault();
    
    console.log(event.target.elements.username.value);
    console.log(event.target.elements.password.value);
    
    event.target.submit();
});

Écouter les champs de formulaires individuellement

Si vous voulez surveiller un champ précis du formulaire, vous pouvez utiliser addEventListener() sur l'élément du formulaire.

L'événement change vous permet de surveiller toutes les modifications faites dans un input, un select ou un textarea.

<form id="test-form" action="" method="post">
    <input type="text" id="login_username" name="username" />
    <input type="password" id="login_password" name="password" />
    <button type="submit">Login</button>
</form>

let password = document.querySelector("#login_password");

password.addEventListener("change", (event) => {
    console.log(event.target.value);
});

13 January 2026