Formulaires et validation

Ce que tu vas apprendre

• Écrire un formulaire avec <form>, <label> et <input>.
• Choisir le bon type de champ pour chaque donnée.
• Valider la saisie avec les attributs natifs, sans JavaScript.

Un formulaire complet

Sur un site de recettes, un visiteur peut proposer la sienne :

<form action="/recettes" method="post">
  <p>
    <label for="titre">Nom de la recette</label>
    <input type="text" id="titre" name="titre" required>
  </p>
  <p>
    <label for="email">Ton e-mail</label>
    <input type="email" id="email" name="email" required>
  </p>
  <button type="submit">Envoyer</button>
</form>

<form> entoure l'ensemble. Son attribut action indique l'adresse qui recevra les données, et method la manière de les envoyer (get ou post).

Le label : indispensable

Chaque champ a besoin d'un <label>, le texte qui le décrit. Le lien se fait avec deux attributs qui portent la même valeur :

• for sur le <label> ;
• id sur le champ.

Les gains sont concrets : un lecteur d'écran annonce le nom du champ, et un clic sur le texte place le curseur dans le champ. Pour une case à cocher, cela agrandit la zone cliquable.

Les types de champ

L'attribut type de <input> choisit le champ. Il change le clavier proposé sur mobile et l'aide à la saisie.

Pour un texte long, utilise <textarea>. Pour une liste déroulante, <select> avec des <option>.

Cases à cocher et boutons radio

<fieldset>
  <legend>Difficulté</legend>
  <label><input type="radio" name="niveau" value="facile"> Facile</label>
  <label><input type="radio" name="niveau" value="moyen"> Moyen</label>
</fieldset>

Les boutons radio d'un même groupe partagent le même name : un seul peut être choisi. <fieldset> regroupe des champs liés, et <legend> donne le titre du groupe, lu par le lecteur d'écran avant chaque option.

Ici, le <label> entoure le champ : le lien se fait sans for ni id.

Le bouton d'envoi

<button type="submit"> envoie le formulaire. Écris toujours son type. Sans lui, un bouton placé dans un formulaire est un bouton d'envoi par défaut, ce qui surprend.

Utilise type="button" pour un bouton qui ne doit rien envoyer, et type="reset" seulement si tu en as vraiment besoin.

La validation native

La validation vérifie la saisie avant l'envoi. Le navigateur sait le faire seul avec quelques attributs :

<label for="portions">Nombre de portions</label>
<input type="number" id="portions" name="portions" min="1" max="20" required>

Si la valeur est invalide, le navigateur bloque l'envoi et affiche un message sur le premier champ en erreur.

Un motif avec pattern

L'attribut pattern prend une expression régulière : une description du format attendu.

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

Indique le format attendu dans le texte du label, ou dans l'attribut title. Sans cela, l'utilisateur voit une erreur sans savoir quoi corriger.

Aider le navigateur à remplir

autocomplete permet au navigateur de proposer les données déjà connues de l'utilisateur :

<input type="email" id="email" name="email" autocomplete="email" required>

Quelques valeurs courantes : name, email, tel, postal-code. Sur un long formulaire, cela évite de la saisie et des erreurs.

Valider aussi côté serveur

Pour désactiver la validation native (par exemple si tu fournis la tienne en JavaScript), ajoute novalidate sur le <form>. Fais-le seulement si tu la remplaces par quelque chose de mieux.

Une liste de contrôle

1. Chaque champ a un <label> relié par for et id.
2. Les groupes de cases ou de boutons radio sont dans un <fieldset> avec une <legend>.
3. Le type correspond à la donnée attendue.
4. Les champs obligatoires portent required, et le texte le dit aussi.
5. Le bouton d'envoi a un type explicite.
6. Le formulaire se remplit entièrement au clavier.

À retenir

• Un formulaire se compose de <form>, de champs <input> et d'un <button type="submit">.
• Chaque champ a un <label> relié par for et id : un placeholder ne le remplace pas.
• Le type du champ guide la saisie, et <fieldset> avec <legend> regroupe les choix liés.
• required, minlength, min, max et pattern valident la saisie sans JavaScript.
• La validation du navigateur ne protège pas : le serveur doit tout revérifier.