Les Formulaires

Les formulaires permettent à l’utilisateur d’envoyer des données.

Ils sont présents partout sur le web :

• Connexion
• Inscription
• Recherche
• Commentaires
• Paiement

JavaScript permet de contrôler et valider les formulaires avant leur envoi.

1. La balise form

Un formulaire HTML utilise la balise <form>.

<form>

    <input type="text">

    <button>

        Envoyer

    </button>

</form>

Le formulaire contient généralement :

• Des champs input
• Des boutons
• Des zones textarea
• Des listes select

2. Les champs input

Les champs input permettent à l’utilisateur d’entrer des données.

<input type="text">
<input type="email">
<input type="password">

3. Sélectionner un formulaire

JavaScript peut sélectionner un formulaire avec le DOM.

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

Une fois sélectionné, JavaScript peut écouter ses événements.

4. L’événement submit

L’événement submit se produit lorsqu’un formulaire est envoyé.

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

form.addEventListener("submit", () => {

    console.log("Formulaire envoyé");

});

5. preventDefault()

Par défaut, le navigateur recharge la page après l’envoi d’un formulaire.

La méthode preventDefault() permet d’empêcher ce comportement.

form.addEventListener("submit", (event) => {

    event.preventDefault();

});

Cette méthode est très utilisée avec JavaScript moderne.

6. Lire la valeur d’un champ

La propriété value permet de lire le contenu d’un champ.

const input = document.querySelector("input");

console.log(input.value);

Cette propriété retourne ce que l’utilisateur a écrit.

7. Validation simple

JavaScript peut vérifier les données avant l’envoi.

const input = document.querySelector("input");

if (input.value.length < 3) {

    console.log("Nom trop court");

}

Ici, le programme vérifie si le texte contient au moins 3 caractères.

8. Afficher un message d’erreur

Le DOM permet d’afficher des messages dans la page.

const error = document.querySelector("#error");

error.textContent = "Champ obligatoire";

Cette technique est souvent utilisée pour afficher :

• Des erreurs
• Des validations
• Des confirmations

9. Validation complète d’un formulaire

Exemple simple de validation avec JavaScript.

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

const input = document.querySelector("#username");

const error = document.querySelector("#error");

form.addEventListener("submit", (event) => {

    event.preventDefault();

    if (input.value.length < 3) {

        error.textContent = "Minimum 3 caractères";

        return;

    }

    error.textContent = "Formulaire valide";

});

Ici :

• Le formulaire est bloqué
• JavaScript valide les données
• Un message est affiché

10. L’événement input

L’événement input se déclenche lorsque l’utilisateur modifie un champ.

input.addEventListener("input", () => {

    console.log(input.value);

});

Cela permet de créer des validations en temps réel.

11. Types de validation

Les formulaires peuvent vérifier plusieurs règles :

• Champ vide
• Longueur minimale
• Adresse email valide
• Mot de passe sécurisé
• Confirmation des données

12. Bonnes pratiques

• Valider les données côté client
• Afficher des messages clairs
• Utiliser preventDefault()
• Éviter document.write()
• Utiliser textContent pour les messages

Important : la validation JavaScript ne remplace jamais la validation côté serveur.

Résumé rapide