Exercices : Manipulation de formulaires en JavaScript

Exercice 0 : préparation du repository

Créez un repository public avec un README sur GitHub, appelez-le bre05-js-j6
Clonez-le dans le dossier sites/js de votre IDE.

Exercice 1 : récupérer les valeurs des champs d'un formulaire

Dans le dossier bre05-js-j6, créez un dossier exercice-1. Dans le dossier exercice-1 créez un fichier index.html et un fichier index.js.

Créez un formulaire avec deux champs : un champ texte et un champ mot de passe.
Ajoutez un bouton de soumission.
Récupérez les valeurs des champs lors de la soumission du formulaire.
Affichez les valeurs dans la console.

Exercice 2 : soumettre le formulaire vous-même après traitement

Dans le dossier bre05-js-j6, créez un dossier exercice-2. Dans le dossier exercice-2 créez un fichier index.html et un fichier index.js.

Créez un formulaire avec deux champs : un champ texte et un champ mot de passe.
Ajoutez un bouton de soumission.
Récupérez les valeurs des champs lors de la soumission du formulaire.
Affichez les valeurs dans la console.
Soumettez le formulaire vous-même après traitement.

Exercice 3 : écouter les champs de formulaires individuellement

Dans le dossier bre05-js-j6, créez un dossier exercice-3. Dans le dossier exercice-3 créez un fichier index.html et un fichier index.js.

Créez un formulaire avec trois champs : un champ texte, un select et un textarea.
Ecoutez les modifications de chaque champ individuellement
Affichez sa valeur dans la console à chaque changement

Exercice 4 : valider des champs de formulaire

Dans le dossier bre05-js-j6, créez un dossier exercice-4. Dans le dossier exercice-4 créez un fichier index.html et un fichier index.js.

Le contenu du fichier index.html:

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8" >
        <title>
            Exercice 4 : Valider les champs de formulaire
        </title>
    </head>
    <body>
        <style>
            .valid {
                border:1px solid green;
            }

            .invalid {
                border: 1px solid red;
            }
        </style>
        <form id="signup-form">
            <input type="password" id="password" name="password" />
            <input type="password" id="confirm_password" name="confirm_password" />
            <button type="submit">Valider</button>
        </form>
    </body>
    <script type="application/javascript" src="index.js"></script>
</html>

À la soumission du formulaire
Vérifier si les mots de passe sont identiques
Ajouter la classe .invalid aux champs si les mots de passe ne sont pas identiques
Afficher la classe .valid aux champs si les mots de passe sont identiques

Exercice 5 : Affichage dynamique et prévisualisation

Dans le dossier bre05-js-j6, créez un dossier exercice-5. Dans le dossier exercice-5 créez un fichier index.html et un fichier index.js.

Créez un formulaire avec un champ texte et un sélecteur de couleur (<input type="color">).
Créez une div vide en dessous du formulaire.
À chaque frappe dans le champ texte, mettez à jour le texte à l'intérieur de la div.
À chaque changement de couleur, changez la couleur de fond de la div.

Exercice 6 : Checkbox et activation de bouton

Dans le dossier bre05-js-j6, créez un dossier exercice-6. Dans le dossier exercice-6 créez un fichier index.html et un fichier index.js.

Créez un formulaire d'inscription avec un champ texte, un champ email et un champ mot de passe.
Ajoutez une checkbox : "J'accepte les conditions générales d'utilisation".
Par défaut, le bouton de soumission doit être désactivé (disabled).
Le bouton doit devenir cliquable uniquement si la case est cochée.
Si la case est décochée par la suite, le bouton doit se désactiver à nouveau.

13 January 2026