JavaScript - Les formulaires

Lire la valeur d'un champ

Tous les champs (<input>, <textarea>, <select>) exposent une propriété .value.

<input id="nom" type="text">
<button id="valider">OK</button>

<script>
    const champ = document.getElementById("nom");
    const bouton = document.getElementById("valider");

    bouton.addEventListener("click", () => {
        const saisie = champ.value;
        console.log(`Saisie : ${saisie}`);
    });
</script>

champ.value est toujours un string, comme prompt(). Pour les champs <input type="number">, il faut convertir : parseInt(champ.value).

Cases à cocher et boutons radio

Pour les checkbox et les radio, on ne lit pas .value (qui contient le value HTML, fixe) mais .checked (true/false).

<input type="checkbox" id="newsletter"> Recevoir la newsletter

const cb = document.getElementById("newsletter");

if (cb.checked) {
    console.log("Inscrit");
} else {
    console.log("Pas inscrit");
}

Pour un groupe de boutons radio : on parcourt et on cherche celui qui est coché.

<input type="radio" name="taille" value="S"> S
<input type="radio" name="taille" value="M"> M
<input type="radio" name="taille" value="L"> L

const choisi = document.querySelector('input[name="taille"]:checked');
console.log(choisi.value);   // "S", "M" ou "L"

Listes déroulantes

<select id="pays">
    <option value="be">Belgique</option>
    <option value="fr">France</option>
    <option value="lu">Luxembourg</option>
</select>

const select = document.getElementById("pays");
console.log(select.value);   // "be", "fr" ou "lu"

Réagir en temps réel : input

L'événement input se déclenche à chaque frappe (ou modification). Idéal pour les compteurs de caractères, les validations en direct, les recherches instantanées.

<input id="message" type="text" maxlength="100">
<span id="compteur">100</span>

<script>
    const champ = document.getElementById("message");
    const compteur = document.getElementById("compteur");

    champ.addEventListener("input", () => {
        const restant = 100 - champ.value.length;
        compteur.textContent = restant;
    });
</script>

À chaque caractère tapé, le compteur se met à jour. Pas besoin de cliquer sur un bouton.

Intercepter la soumission d'un formulaire

Par défaut, soumettre un formulaire recharge la page (ou redirige). En JavaScript on intercepte l'événement submit pour traiter la saisie sans rechargement.

<form id="contact">
    <input id="email" type="email" required>
    <button type="submit">Envoyer</button>
</form>

<script>
    const form = document.getElementById("contact");

    form.addEventListener("submit", (event) => {
        event.preventDefault();    // bloque l'envoi par défaut

        const email = document.getElementById("email").value;
        console.log(`Email saisi : ${email}`);
        // ici on enverrait à un serveur, on afficherait une confirmation, etc.
    });
</script>

Validation côté client

Avant d'envoyer, on vérifie que la saisie est correcte.

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

    const email = document.getElementById("email").value;
    const message = document.getElementById("message").value;

    if (email === "") {
        alert("L'email est obligatoire.");
        return;
    }

    if (!email.includes("@")) {
        alert("Email invalide.");
        return;
    }

    if (message.length < 10) {
        alert("Message trop court (10 caractères minimum).");
        return;
    }

    // Tout est OK
    console.log("Formulaire valide");
});

Exemple complet : mini-formulaire d'inscription

<form id="inscription">
    <label>Prénom : <input id="prenom" type="text" required></label>
    <label>Âge : <input id="age" type="number" min="0" max="120" required></label>
    <label>
        <input id="cgv" type="checkbox" required> J'accepte les conditions
    </label>
    <button type="submit">S'inscrire</button>
</form>

<div id="resultat"></div>

<script>
    const form = document.getElementById("inscription");
    const resultat = document.getElementById("resultat");

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

        const prenom = document.getElementById("prenom").value.trim();
        const age = parseInt(document.getElementById("age").value);
        const cgv = document.getElementById("cgv").checked;

        if (prenom === "") {
            resultat.textContent = "Prénom obligatoire.";
            return;
        }

        if (isNaN(age) || age < 12) {
            resultat.textContent = "Tu dois avoir au moins 12 ans.";
            return;
        }

        if (!cgv) {
            resultat.textContent = "Tu dois accepter les conditions.";
            return;
        }

        resultat.textContent = `Bienvenue ${prenom} !`;
        form.reset();
    });
</script>

À noter :

• trim() enlève les espaces en début/fin (utile pour les champs texte).
• parseInt + isNaN pour gérer le cas où l'utilisateur tape n'importe quoi.
• form.reset() vide tous les champs après succès.

À retenir

• Lire un champ : champ.value (toujours string — convertir si numérique).
• Cases à cocher / radio : champ.checked (booléen).
• Soumission : form.addEventListener("submit", ...) + event.preventDefault().
• Validation côté client = confort utilisateur. La sécurité, c'est côté serveur.
• input event = mise à jour en temps réel à chaque frappe.
• Sur de vrais formulaires, utiliser les attributs HTML (required, min, max, pattern) en plus du JS — le navigateur fait déjà 80% du boulot.