Propriétés et méthodes des formulaires JavaScript

Introduction à la gestion des formulaires JavaScript

Les formulaires sont le principal moyen pour les utilisateurs d'envoyer des données à une page web. Savoir accéder à leurs contrôles de manière fiable depuis JavaScript est donc une compétence fondamentale. Le DOM expose les formulaires et leurs champs via un ensemble de collections dédiées (document.forms, form.elements) et de propriétés (input.value, checkbox.checked, select.value), ainsi que quelques méthodes impératives (submit(), reset(), focus()).

Ce chapitre explique comment accéder aux formulaires et à leurs contrôles, lire et écrire leurs valeurs, réagir aux saisies utilisateur avec les événements input et change, et déclencher des actions courantes par programmation. Pour une vue d'ensemble de la place des formulaires dans l'arbre du document, consultez Travailler avec les formulaires dans le DOM.

Accéder aux formulaires et à leurs contrôles

`document.forms` et `form.elements`

Chaque formulaire d'une page est accessible via document.forms. Il s'agit d'une collection spéciale que vous pouvez indexer par numéro (document.forms[0]) ou, de manière plus lisible, par l'attribut name du formulaire (document.forms.loginForm ou document.forms['loginForm']).

Une fois que vous disposez d'un formulaire, form.elements vous donne accès à ses contrôles nommés de la même façon — par index ou par le name du contrôle. L'accès par nom est le style recommandé car il reste fonctionnel même si vous ajoutez ou réorganisez des champs :

const form = document.forms.loginForm;     // a <form name="loginForm">
const userField = form.elements.username;  // an <input name="username">
// Shortcut: named controls are also exposed directly on the form
const samePassword = form.password;        // <input name="password">

Quand plusieurs contrôles partagent le même name (boutons radio), form.elements.name renvoie une RadioNodeList — une collection dont la propriété .value correspond à la valeur du bouton actuellement sélectionné. Un <fieldset> possède également sa propre collection elements, ce qui vous permet de traiter une section groupée comme un mini-formulaire.

Voici un exemple complet qui accède à un formulaire et à ses champs :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>JavaScript Form Example</title>
</head>
<body>
    <form name="loginForm">
        <input type="text" name="username" placeholder="Username" />
        <input type="password" name="password" placeholder="Password" />
        <input type="submit" value="Login" />
    </form>
    <div style="margin-top:15px;" id="output"></div>

    <script>
        const form = document.forms['loginForm'];
        const username = form.elements['username'];
        const password = form.elements['password'];
        form.onsubmit = function(event) {
            const output = document.getElementById('output');
            output.textContent = 'Username: ' + username.value + ' Password: ' + password.value;
            event.preventDefault(); // Prevent form submission
        }
    </script>
</body>
</html>

Essayez vous-même »

Ce script intercepte la soumission du formulaire, affiche le nom d'utilisateur et le mot de passe dans un div de la page, et empêche l'envoi du formulaire au serveur.

Lire et écrire les valeurs des contrôles

Chaque type de contrôle expose son état actuel via une propriété légèrement différente — savoir laquelle lire représente la moitié du travail :

Contrôle	Lire / écrire avec	Remarques
`text`, `password`, `email`, `textarea`	`.value`	Toujours un string
`checkbox`	`.checked` (boolean)	`.value` correspond à la valeur de l'attribut, pas à l'état coché
`radio` (groupe)	`form.elements.groupName.value`	Valeur du bouton sélectionné, ou `""`
`<select>`	`.value`	Valeur de l'`<option>` sélectionnée ; `.options[i]` et `.selectedIndex` offrent un accès plus fin

input.value = 'hello';            // text-like fields
checkbox.checked = true;          // tick a checkbox
select.value = 'medium';          // selects the matching <option>
const chosen = select.options[select.selectedIndex].text; // visible label

Un piège classique pour les débutants est de lire checkbox.value pour savoir si une case est cochée — cela renvoie la valeur statique de l'attribut ("on" par défaut), pas l'état coché. Utilisez .checked à la place.

Travailler avec les valeurs des champs

Manipuler les valeurs des champs est simple en JavaScript. Voici comment définir dynamiquement des valeurs et les afficher sur votre page web :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Input Value Example</title>
</head>
<body>
    <form name="userForm">
        <input type="text" name="firstName" placeholder="First Name" />
        <input type="text" name="lastName" placeholder="Last Name" />
        <input type="submit" value="Submit" />
    </form>
    <div id="welcomeMessage"></div>

    <script>
        const form = document.forms['userForm'];
        const firstName = form.elements['firstName'];
        const lastName = form.elements['lastName'];
        firstName.value = 'John';
        lastName.value = 'Doe';

        form.onsubmit = function(event) {
            const welcomeMessage = document.getElementById('welcomeMessage');
            welcomeMessage.textContent = 'Hello, ' + firstName.value + ' ' + lastName.value + '!';
            event.preventDefault(); // Prevents the form from submitting to a server
        }
    </script>
</body>
</html>

Essayez vous-même »

Dans cet exemple, le prénom et le nom sont prédéfinis à « John » et « Doe ». Lors de la soumission du formulaire, un message de bienvenue s'affiche sur la page, illustrant à la fois la définition et la récupération des valeurs de champ. Pour des formulaires plus complexes, envisagez l'API FormData pour sérialiser facilement les données en paires clé-valeur sans accéder manuellement à chaque élément.

Techniques avancées pour les formulaires

Validation de formulaire

La validation de formulaire en temps réel est essentielle pour l'expérience utilisateur. Voici un exemple de validation d'une adresse e-mail avant la soumission du formulaire. Notez que la validation d'e-mail HTML5 est basique et souvent complétée par des expressions régulières personnalisées ou des bibliothèques en production, car elle peut accepter à tort des adresses incomplètes comme « w3docs@gmail » (si vous souhaitez savoir comment résoudre ce problème, vous pouvez lire API de validation JavaScript) :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Form Validation Example</title>
</head>
<body>
    <form name="registrationForm">
        <input type="email" name="email" placeholder="Enter your email" required />
        <input type="submit" value="Register" />
    </form>
    <div id="message"></div>

    <script>
        const form = document.forms['registrationForm'];
        const email = form.elements['email'];

        form.onsubmit = function(event) {
            // Note: HTML5 email validation is basic and often supplemented by custom regex or libraries for production.
            // It may incorrectly accept incomplete addresses like 'w3docs@gmail'.
            if (!email.checkValidity()) {
                document.getElementById('message').textContent = "Please enter a valid email address.";
                event.preventDefault();
                return;
            }
            document.getElementById('message').textContent = "Registration successful!";
            event.preventDefault(); // Prevents actual form submission
        }
    </script>
</body>
</html>

Essayez vous-même »

Dans ce script, le formulaire valide le champ e-mail lors de la soumission. Il affiche un message indiquant si l'inscription a réussi ou si une erreur s'est produite, sans envoyer de données au serveur. Cet exemple met également en évidence une limitation de la validation d'e-mail HTML5, qui ne garantit pas entièrement la correction des formats de domaine.

Réagir aux événements `input` et `change`

Deux événements couvrent la plupart des interactions avec les formulaires :

input se déclenche à chaque frappe ou modification de valeur — idéal pour les aperçus en direct, les compteurs de caractères et la validation à la saisie.
change se déclenche uniquement lorsque l'utilisateur valide une modification : quand un champ texte perd le focus après une édition, ou immédiatement lorsqu'une case à cocher, un bouton radio ou un <select> est modifié. Utilisez-le quand réagir à chaque frappe serait superflu.

search.addEventListener('input', () => console.log(search.value)); // every keystroke
country.addEventListener('change', () => console.log(country.value)); // on selection

L'exemple suivant utilise input pour afficher un compteur de caractères en temps réel pendant que l'utilisateur tape :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Input Event Example</title>
</head>
<body>
  <form name="bioForm">
    <textarea name="bio" maxlength="100" placeholder="Tell us about yourself"></textarea>
  </form>
  <div id="counter">0 / 100</div>

  <script>
    const bio = document.forms.bioForm.elements.bio;
    const counter = document.getElementById('counter');
    bio.addEventListener('input', function () {
      counter.textContent = bio.value.length + ' / 100';
    });
  </script>
</body>
</html>

Pour les mécanismes plus détaillés de la soumission — notamment la différence entre l'événement submit et la méthode form.submit() — consultez Formulaires : événement et méthode submit.

Méthodes de formulaire : `submit()`, `reset()` et `focus()`

Les formulaires et les contrôles offrent également des méthodes impératives :

form.submit() envoie le formulaire par programmation. Point important : cette méthode ne déclenche pas l'événement submit, donc toute validation associée à cet événement est ignorée. Préférez form.requestSubmit() lorsque vous avez besoin que la validation et l'événement s'exécutent.
form.reset() restaure chaque contrôle à sa valeur initiale.
element.focus() déplace le curseur clavier vers un contrôle — parfait pour mettre en évidence le premier champ invalide. Son équivalent inverse est blur(). Consultez Focus : focus / blur pour plus de détails.

const form = document.forms.signup;
if (!form.email.value) {
  form.email.focus();   // send the user straight to the empty field
} else {
  form.requestSubmit(); // submit AND run the submit event + validation
}
form.reset();           // clear the form back to defaults

Gérer les événements de formulaire

Voici comment gérer dynamiquement les événements de formulaire :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Form Events Example</title>
  </head>
  <body>
    <div style="display: flex; justify-content: center; align-items: center">
      <form
        style="display: flex; flex-direction: column; gap: 5px"
        name="contactForm"
      >
        <input type="text" name="fullName" placeholder="Full Name" required />
        <textarea name="message" placeholder="Your Message"></textarea>
        <input type="submit" value="Send" />
      </form>
    </div>
    <div
      style="display: flex; justify-content: center; align-items: center"
      id="confirmation"
    ></div>

    <script>
      const form = document.forms["contactForm"];

      form.onsubmit = function (event) {
        const name = form.elements["fullName"].value;
        const message = form.elements["message"].value;
        document.getElementById("confirmation").textContent =
          "Thank you, " + name + ", we received your message!";
        event.preventDefault(); // Prevents form from submitting to a server
      };
    </script>
  </body>
</html>

Essayez vous-même »

Cet exemple fournit un retour immédiat à l'utilisateur en affichant un message de confirmation lors de la soumission du formulaire. Il illustre efficacement comment JavaScript peut gérer les événements de formulaire pour améliorer l'interaction sans communication avec le serveur.

Conclusion

Maîtriser les propriétés et méthodes des formulaires JavaScript améliore la fonctionnalité et l'interaction utilisateur des applications web. Accédez aux formulaires via document.forms, adressez leurs contrôles par nom avec form.elements, lisez l'état avec la bonne propriété (value, checked, selectedIndex), réagissez aux événements input et change, et pilotez le formulaire avec submit(), reset() et focus().

Pour aller plus loin, continuez avec ces chapitres connexes :

Pratique

Lesquelles des affirmations suivantes sont vraies concernant les formulaires JavaScript et leurs méthodes ?

La collection `document.forms` permet d'accéder aux formulaires du document en utilisant à la fois le nom et l'index numérique.Avec `form.elements`, vous pouvez accéder aux éléments individuels d'un formulaire via leur attribut name.`form.submit()` déclenche l'événement submit du formulaire et est utilisé pour valider les données avant de les envoyer au serveur.L'élément `fieldset` dans un formulaire agit comme un sous-formulaire et contient sa propre propriété `elements`.Modifier le nom d'un élément input via JavaScript met immédiatement à jour la collection `form.elements` pour refléter le nouveau nom.

Introduction à la gestion des formulaires JavaScript

Accéder aux formulaires et à leurs contrôles

document.forms et form.elements

Lire et écrire les valeurs des contrôles

Travailler avec les valeurs des champs

Techniques avancées pour les formulaires

Validation de formulaire

Réagir aux événements input et change

Méthodes de formulaire : submit(), reset() et focus()

Gérer les événements de formulaire

Conclusion

Pratique

`document.forms` et `form.elements`

Réagir aux événements `input` et `change`

Méthodes de formulaire : `submit()`, `reset()` et `focus()`