Formulaires

📋 Le cours : saisir et envoyer des données

Un formulaire (<form>) permet à l'utilisateur de saisir des informations et de les envoyer à un serveur, ou de les traiter directement avec JavaScript. Les aperçus ci-dessus montrent chaque type de champ ; voici comment les assembler en un formulaire qui fonctionne.

Anatomie d'un formulaire

action est l'adresse qui reçoit les données, method la façon de les envoyer. Chaque champ a un name (la clé sous laquelle sa valeur est envoyée) et un id (utilisé pour le lier à son <label>). Un bouton type="submit" déclenche l'envoi.

<form action="/inscription" method="post">
  <label for="prenom">Prénom</label>
  <input id="prenom" name="prenom" type="text" required>

  <label for="mail">E-mail</label>
  <input id="mail" name="mail" type="email" required>

  <button type="submit">S'inscrire</button>
</form>

Ce qui part vraiment : les attributs name

GET ou POST ?

<form action="recherche.html" method="get">
  <input type="search" name="q" value="python">
  <select name="niveau">
    <option value="2" selected>Niveau 2</option>
  </select>
  <button type="submit">Chercher</button>
</form>

recherche.html?q=python&niveau=2

Associer chaque champ à un label

<label for="prenom"> est relié au champ d'id="prenom" : cliquer sur le libellé place le curseur dans le champ, et un lecteur d'écran annonce le libellé quand on arrive sur le champ. On peut aussi entourer le champ par le label (<label>Prénom <input name="prenom"></label>), pratique pour les cases à cocher. Le placeholder est une indication grisée qui disparaît à la saisie : ce n'est pas un remplaçant du label.

Boutons radio, cases à cocher, listes, zones de texte

• Des boutons radio qui partagent le même name forment un groupe : un seul choix possible.
• Des cases à cocher peuvent partager un name : toutes les cases cochées sont envoyées.
• <select> + <option value="…"> : liste déroulante ; <optgroup label="…"> regroupe des options ; multiple autorise plusieurs choix.
• <textarea rows="4"> : texte sur plusieurs lignes (le contenu est écrit entre les balises).
• <fieldset> + <legend> : regroupe des champs liés sous un titre, ce que les lecteurs d'écran annoncent.

<form>
  <fieldset>
    <legend>Niveau</legend>
    <label><input type="radio" name="niveau" value="1" checked> Première</label>
    <label><input type="radio" name="niveau" value="2"> Terminale</label>
  </fieldset>

  <fieldset>
    <legend>Langages connus</legend>
    <label><input type="checkbox" name="langage" value="python"> Python</label>
    <label><input type="checkbox" name="langage" value="c"> C</label>
  </fieldset>

  <label for="specialite">Spécialité</label>
  <select id="specialite" name="specialite">
    <option value="">Choisir…</option>
    <option value="nsi">NSI</option>
    <option value="maths">Maths</option>
  </select>

  <label for="message">Message</label>
  <textarea id="message" name="message" rows="4" cols="40"></textarea>
</form>

Un cadre « Niveau » avec deux boutons ronds (Première coché), un cadre « Langages connus » avec deux cases, une liste déroulante « Spécialité » et une zone de texte de 4 lignes.

Valider avant l'envoi

HTML5 sait vérifier les saisies sans JavaScript : required (obligatoire), type="email" / type="number", min / max / step pour les nombres et les dates, minlength / maxlength pour la longueur, pattern (expression régulière) pour un format. Si un champ est invalide, le navigateur bloque l'envoi et affiche un message.

<form>
  <label for="age">Âge (15 à 20)</label>
  <input id="age" name="age" type="number" min="15" max="20" required>

  <label for="pseudo">Pseudo (3 à 12 lettres)</label>
  <input id="pseudo" name="pseudo" minlength="3" maxlength="12" pattern="[A-Za-z]+" required>

  <button type="submit">Valider</button>
</form>

Si l'âge vaut 30 ou si le pseudo contient un chiffre, le navigateur bloque l'envoi et signale le champ en cause.

Les boutons

Traiter le formulaire avec JavaScript

On écoute l'évènement submit et on appelle event.preventDefault() pour empêcher le rechargement de la page, puis on lit les valeurs avec .value. Les valeurs de champs sont toujours des textes : Number(…) convertit.

<form id="calcul">
  <input id="nombre" type="number" value="5">
  <button type="submit">Calculer le carré</button>
</form>
<p id="resultat"></p>

<script>
  document.getElementById("calcul").addEventListener("submit", function (event) {
    event.preventDefault();                 // empêche l'envoi réel
    const n = Number(document.getElementById("nombre").value);
    document.getElementById("resultat").textContent = n * n;
  });
</script>

Au clic sur le bouton, « 25 » s'affiche sous le formulaire, sans recharger la page.

Voir le DOM en JavaScript pour sélectionner et modifier des éléments.

Attributs utiles

⚠️ Erreurs fréquentes

Un champ sans name

<input id="mail" type="email">    <!-- jamais envoyé -->

<input id="mail" name="mail" type="email">

Des boutons radio qui n'ont pas le même name

Chaque bouton radio est alors indépendant : on peut tous les cocher. Pour qu'un seul reste coché, ils doivent partager le même name (et avoir des value différentes).

Remplacer le label par un placeholder

<input name="mail" placeholder="Votre e-mail">   <!-- disparaît à la saisie, pas lu partout -->

<label for="mail">Votre e-mail</label>
<input id="mail" name="mail" type="email">

Envoyer un mot de passe en GET

Avec method="get", le mot de passe se retrouve dans l'adresse : visible à l'écran, dans l'historique et dans les journaux du serveur. Un formulaire de connexion utilise method="post" (et type="password", qui masque seulement l'affichage).

Un bouton qui recharge la page sans le vouloir

Dans un <form>, <button> sans type est un bouton submit. Pour un bouton qui ne déclenche qu'une action JavaScript, écris type="button".

Un label et un id qui ne correspondent pas

<label for="prenom"> ne fonctionne que si un champ a exactement id="prenom", et un id doit être unique dans la page. Une faute de frappe casse le lien sans message d'erreur.

Faire confiance à la validation du navigateur

required, pattern, min aident l'utilisateur mais ne protègent pas le serveur : vérifie toujours les données reçues côté serveur.

📋 Aide-mémoire

• <form action="…" method="get|post"> ; chaque champ : name (envoyé), id (lié au <label for>).
• GET : données dans l'adresse (recherche) ; POST : dans le corps (inscription, connexion, mot de passe).
• Radio : même name = un seul choix ; cases à cocher : plusieurs valeurs ; <select>, <textarea>, <fieldset> + <legend>.
• Validation HTML5 : required, type, min / max, minlength / maxlength, pattern ; le serveur revérifie toujours.
• <button> dans un formulaire = submit ; type="button" pour une action JavaScript ; event.preventDefault() bloque l'envoi.
• Le placeholder ne remplace pas le <label> ; disabled n'est pas envoyé, readonly l'est.