La gestion des formulaires en JavaScript

Le formulaire est le moyen pour les utilisateurs de transmettre des informations. Formulaire de contact, d’inscription, de connexion, les exemples ne manquent pas.

Sauf que les formulaires doivent répondre à des normes d’accessibilité et de validation essentielles. Nous verrons donc au cours de cet article comment bien mettre en place un formulaire et surtout comment le valider efficacement.

La partie HTML

L’écriture du DOM doit répondre à des normes assez strictes et il convient d’être assez rigoureux à ce niveau là. Je vous propose donc d’écrire un formulaire de contact très simple dans lequel nous renseignerons juste le nom, le prénom, l’adresse email ainsi qu’un message.

<form action="" method="post">

    <label for="last_name">Nom</label>
    <input id="last_name" type="text" placeholder="Nom" name="last_name">

    <label for="first_name">Prénom</label>
    <input id="first_name" type="text" placeholder="Prénom" name="first_name">

    <label for="email">Email</label>
    <input id="email" type="email" placeholder="Email" name="email">

    <label for="message">Message</label>
    <textarea id="message" name="message"></textarea>

    <button type="submit">Envoyer</button>
    <button type="reset">Effacer</button>

</form>