Formulaire HTML : input, label et validation

Un formulaire HTML est un ensemble de champs (<input>, <select>, <textarea>) placés dans une balise <form>, dont les valeurs sont envoyées à un serveur quand l'utilisateur clique sur le bouton d'envoi. Ce chapitre montre comment construire un formulaire complet et accessible, comment le navigateur vérifie les saisies avec required, type et pattern, et pourquoi cette validation ne remplace jamais celle du serveur.

La balise form : action et method

<form action="inscription.php" method="post">
  <label for="nom">Nom</label>
  <input type="text" id="nom" name="nom">
  <button type="submit">S'inscrire</button>
</form>

Seuls les champs qui ont un attribut name sont envoyés : c'est le nom sous lequel le serveur retrouvera la valeur ($_POST['nom'] en PHP). Un champ sans name s'affiche, se remplit, mais n'arrive jamais au serveur. C'est l'oubli le plus fréquent.

GET ou POST ? Avec get, les données sont ajoutées à l'adresse :

https://www.mediatheque-tilleuls.fr/recherche.php?q=harry+potter&type=livre

Avec post, elles voyagent dans le corps de la requête HTTP, invisibles dans l'adresse.

Les champs input et leurs types

L'élément <input> change de nature selon son attribut type. Le bon type apporte trois choses gratuites : un clavier adapté sur téléphone, une vérification du format par le navigateur, et parfois une interface dédiée (calendrier, palette).

label : une étiquette pour chaque champ

Chaque champ a une étiquette <label>, reliée au champ par son attribut for, qui reprend l'id du champ :

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

Ce lien n'est pas décoratif :

• un clic sur l'étiquette place le curseur dans le champ, ou coche la case : une cible bien plus grande, précieuse sur téléphone et pour les personnes qui ont du mal à viser ;
• un lecteur d'écran annonce « Adresse e-mail, zone d'édition » en arrivant sur le champ ; sans <label>, il dit seulement « zone d'édition », et la personne ne sait pas quoi taper.

On peut aussi mettre le champ dans le <label>, sans for ni id : <label>Nom <input name="nom"></label>. La première forme est plus souple pour la mise en page.

textarea, select, boutons radio et cases à cocher

<!-- Zone de texte sur plusieurs lignes -->
<label for="message">Votre message</label>
<textarea id="message" name="message" rows="5" maxlength="1000"></textarea>

<!-- Liste déroulante -->
<label for="atelier">Atelier</label>
<select id="atelier" name="atelier">
  <option value="">-- Choisir un atelier --</option>
  <optgroup label="Numérique">
    <option value="initiation">Initiation à l'ordinateur</option>
    <option value="demarches">Démarches en ligne</option>
  </optgroup>
  <optgroup label="Lecture">
    <option value="club-ados">Club lecture ados</option>
  </optgroup>
</select>

La valeur envoyée est celle de l'attribut value (initiation), pas le texte affiché. Ajoute multiple pour autoriser plusieurs choix (et un name qui se termine par [] si le serveur est en PHP).

Des boutons radio ou des cases à cocher qui répondent à une même question se regroupent dans un <fieldset>, avec la question dans une <legend> :

<fieldset>
  <legend>Tranche d'âge</legend>
  <input type="radio" id="age-enfant" name="age" value="enfant">
  <label for="age-enfant">Moins de 12 ans</label>
  <input type="radio" id="age-ado" name="age" value="ado">
  <label for="age-ado">12 à 17 ans</label>
  <input type="radio" id="age-adulte" name="age" value="adulte" checked>
  <label for="age-adulte">18 ans et plus</label>
</fieldset>

<fieldset>
  <legend>Comment avez-vous connu l'atelier ?</legend>
  <input type="checkbox" id="src-site" name="source[]" value="site">
  <label for="src-site">Le site</label>
  <input type="checkbox" id="src-affiche" name="source[]" value="affiche">
  <label for="src-affiche">Une affiche</label>
</fieldset>

• Les boutons radio d'un même groupe partagent le même name : c'est ce qui les rend exclusifs. Chacun a sa propre value.
• checked coche par défaut. Une case non cochée n'envoie rien : côté serveur, l'absence de valeur signifie « non ».
• Le lecteur d'écran annonce la légende avec chaque option : « Tranche d'âge, groupe ; 12 à 17 ans, bouton radio, 2 sur 3 ».

Enfin, les boutons :

autocomplete : aider le navigateur à remplir

L'attribut autocomplete dit au navigateur quelle information attend le champ, pour qu'il propose les données que l'utilisateur a enregistrées :

<input type="text" id="prenom" name="prenom" autocomplete="given-name">
<input type="text" id="nom" name="nom" autocomplete="family-name">
<input type="email" id="email" name="email" autocomplete="email">
<input type="tel" id="tel" name="tel" autocomplete="tel">
<input type="text" id="cp" name="cp" autocomplete="postal-code" inputmode="numeric">
<input type="password" id="mdp" name="mdp" autocomplete="new-password">

Pour une personne qui a du mal à taper (handicap moteur, troubles cognitifs) ou qui remplit sur téléphone, c'est un gain énorme. C'est d'ailleurs un critère d'accessibilité : WCAG 1.3.5 et RGAA 11.13 demandent d'indiquer la finalité des champs qui concernent l'utilisateur. Pour un mot de passe, current-password sert à la connexion, new-password à la création de compte (le gestionnaire propose alors un mot de passe solide).

La validation native : required, pattern, min et max

Le navigateur sait vérifier les saisies avant l'envoi, sans une ligne de JavaScript. Si un champ est invalide, il bloque l'envoi, place le curseur dans le premier champ en erreur et affiche une bulle d'explication.

<label for="cp">Code postal (5 chiffres)</label>
<input type="text" id="cp" name="cp" inputmode="numeric"
       pattern="[0-9]{5}" required autocomplete="postal-code">

<label for="date">Date souhaitée</label>
<input type="date" id="date" name="date" min="2026-06-01" max="2026-06-30" required>

Le pattern s'applique à toute la valeur : [0-9]{5} refuse 750001 (six chiffres) sans qu'il soit besoin d'écrire ^ et $. Il n'est vérifié que si le champ n'est pas vide : ajoute required si la saisie est obligatoire. Indique toujours le format attendu dans l'étiquette (« 5 chiffres ») : le message d'erreur du navigateur se contente souvent de « Veuillez respecter le format requis ».

En CSS, les pseudo-classes :valid et :invalid permettent de colorer les champs. Mais :invalid s'applique dès l'affichage : un formulaire vierge s'afficherait tout en rouge. Utilise plutôt :user-invalid, reconnue par tous les navigateurs actuels, qui n'agit qu'une fois que l'utilisateur a modifié le champ ou tenté d'envoyer :

input:user-invalid,
select:user-invalid {
  border: 2px solid #b91c1c;
}

L'attribut novalidate sur <form> désactive la validation du navigateur. On s'en sert quand un script JavaScript prend le relais pour afficher ses propres messages, plus clairs et mieux placés.

Des messages d'erreur accessibles

Les bulles d'erreur natives du navigateur disparaissent au bout de quelques secondes et se lisent mal avec certaines aides techniques. Pour un formulaire important, on affiche des messages dans la page, sous le champ concerné. Trois règles pour qu'ils soient compris de tous :

1. Le message est un texte, pas seulement une bordure rouge : une personne daltonienne ne voit pas la différence, un lecteur d'écran ne lit pas les couleurs.
2. Le message est relié au champ par aria-describedby, et le champ est marqué aria-invalid="true" : le lecteur d'écran annonce « Adresse e-mail, invalide, saisie obligatoire. Exemple : nom@domaine.fr ».
3. Le message dit comment corriger, pas seulement qu'il y a une erreur : « Saisissez une adresse de la forme nom@domaine.fr » plutôt que « Champ invalide ».

<label for="email">Adresse e-mail (obligatoire)</label>
<input type="email" id="email" name="email" required autocomplete="email"
       aria-invalid="true" aria-describedby="email-erreur">
<p id="email-erreur" class="erreur">
  Adresse e-mail invalide : saisissez une adresse de la forme nom@domaine.fr.
</p>

Sur un long formulaire, ajoute en haut, après l'envoi, un récapitulatif des erreurs avec un lien vers chaque champ, et place le focus dessus. Signale aussi les champs obligatoires avant la saisie, dans l'étiquette (« (obligatoire) ») ou avec un astérisque expliqué en tête de formulaire.

Les limites de la validation côté client

Tout ce qui précède se passe dans le navigateur de l'utilisateur, c'est-à-dire sur une machine que tu ne contrôles pas. N'importe qui peut :

• supprimer l'attribut required ou pattern dans l'inspecteur, puis envoyer ;
• modifier la valeur d'un champ hidden ou d'une option de <select> ;
• envoyer directement une requête au serveur, sans passer par ton formulaire :

curl -X POST https://www.mediatheque-tilleuls.fr/inscription.php \
     -d "nom=" -d "email=pas-une-adresse" -d "atelier=atelier-qui-n-existe-pas"

La validation côté client sert le confort de l'utilisateur : il voit ses erreurs tout de suite, sans aller-retour. La sécurité et la cohérence des données reposent uniquement sur la validation côté serveur.

Pense enfin au RGPD : un formulaire ne demande que les données nécessaires (pas de date de naissance pour s'inscrire à un atelier), et il indique sous le bouton d'envoi qui traite les données, pourquoi, combien de temps, et comment exercer ses droits (chapitre 14).

Un formulaire complet : l'inscription à un atelier

<form action="inscription.php" method="post">
  <p>Tous les champs sont obligatoires, sauf mention contraire.</p>

  <fieldset>
    <legend>Vos coordonnées</legend>

    <label for="prenom">Prénom</label>
    <input type="text" id="prenom" name="prenom" required maxlength="50" autocomplete="given-name">

    <label for="nom">Nom</label>
    <input type="text" id="nom" name="nom" required maxlength="50" autocomplete="family-name">

    <label for="email">Adresse e-mail</label>
    <input type="email" id="email" name="email" required autocomplete="email"
           aria-describedby="email-aide">
    <p id="email-aide" class="aide">La confirmation d'inscription sera envoyée à cette adresse.</p>

    <label for="tel">Téléphone (facultatif)</label>
    <input type="tel" id="tel" name="tel" autocomplete="tel">
  </fieldset>

  <fieldset>
    <legend>Votre atelier</legend>

    <label for="atelier">Atelier</label>
    <select id="atelier" name="atelier" required>
      <option value="">-- Choisir un atelier --</option>
      <option value="initiation">Initiation à l'ordinateur – 3 juin</option>
      <option value="demarches">Démarches en ligne – 10 juin</option>
    </select>

    <label for="places">Nombre de places (1 à 4)</label>
    <input type="number" id="places" name="places" min="1" max="4" value="1" required>
  </fieldset>

  <input type="checkbox" id="rappel" name="rappel" value="oui">
  <label for="rappel">Recevoir un rappel par e-mail la veille (facultatif)</label>

  <button type="submit">Envoyer mon inscription</button>

  <p class="rgpd">Vos données servent uniquement à gérer votre inscription et sont supprimées
  un mois après l'atelier. <a href="donnees-personnelles.html">Vos données et vos droits</a>.</p>
</form>

form {
  display: grid;
  gap: 0.5rem;
  max-width: 32rem;
}

fieldset {
  display: grid;
  gap: 0.5rem;
  border: 1px solid #94a3b8;
  border-radius: 8px;
  padding: 1rem;
}

label {
  font-weight: 600;
}

input,
select,
textarea {
  font: inherit;               /* les champs n'héritent pas de la police par défaut */
  padding: 0.5rem;
  border: 1px solid #64748b;
  border-radius: 4px;
}

input:focus-visible,
select:focus-visible {
  outline: 3px solid #0f766e;  /* un focus bien visible pour la navigation au clavier */
  outline-offset: 2px;
}

input:user-invalid,
select:user-invalid {
  border: 2px solid #b91c1c;
}

.aide {
  font-size: 0.9rem;
  color: #475569;
}

Exercices

<form action="contact.php">
  Nom : <input type="text" id="nom">
  <input type="text" placeholder="Votre message" name="message">
  <div onclick="envoyer()">Envoyer</div>
</form>

<form action="contact.php" method="post">
  <label for="nom">Nom</label>
  <input type="text" id="nom" name="nom" required autocomplete="name">

  <label for="message">Votre message</label>
  <textarea id="message" name="message" rows="5" required maxlength="2000"></textarea>

  <button type="submit">Envoyer le message</button>
</form>