HTML — Formulaires

Un formulaire est le principal canal par lequel un site reçoit des informations de ses visiteurs : inscription, connexion, contact, commande… C’est aussi l’un des points où l’accessibilité se joue le plus concrètement. Son fonctionnement repose toujours sur le même schéma — un conteneur <form>, des champs de saisie à l’intérieur, et un bouton qui déclenche l’envoi.

Balise <form> — Conteneur de formulaire

La balise <form> enveloppe l’ensemble des champs et décrit où et comment envoyer les données. Deux attributs gouvernent ce comportement.

Attribut	Description	Exemple
action	URL de traitement	action="traitement.php"
method	Méthode HTTP (GET ou POST)	method="POST"

<form action="contact.php" method="POST">
    
</form>

L’attribut action indique l’adresse qui recevra et traitera les données (souvent un script côté serveur), tandis que method précise comment elles voyagent. Le choix entre les deux méthodes n’est pas anodin : GET ajoute les données à l’URL, ce qui convient à une recherche (le résultat est partageable et marquable comme favori) ; POST les transmet dans le corps de la requête, ce qui s’impose dès qu’il s’agit d’envoyer des données volumineuses ou sensibles, comme un mot de passe.

<input> — Champ de saisie

<input> est la balise la plus polyvalente du formulaire : son attribut type change radicalement son comportement et son apparence. En voici les types les plus courants.

Type	Usage	Exemple
text	Texte simple	<input type="text" name="nom">
email	Adresse email (validation)	<input type="email" name="email">
password	Mot de passe (masqué)	<input type="password" name="mdp">
number	Nombre	<input type="number" name="age">
date	Date	<input type="date" name="naissance">
checkbox	Case à cocher	<input type="checkbox" name="cgv">
radio	Bouton radio	<input type="radio" name="sexe">
submit	Bouton de soumission	<input type="submit" value="Envoyer">

Choisir le bon type n’est pas qu’une question d’apparence : un type="email" déclenche une vérification du format, un type="date" ouvre un sélecteur de calendrier, et sur mobile, un type="number" affiche directement le clavier numérique. Le bon type, c’est une meilleure expérience pour l’utilisateur sans une ligne de JavaScript.

Attributs essentiels de <input>

Quel que soit le type, quelques attributs reviennent constamment et méritent d’être maîtrisés.

Attribut	Rôle	Exemple
name	Nom du champ (envoyé au serveur)	name="email"
id	Identifiant unique (lien avec <label>)	id="email-input"
placeholder	Texte d’aide dans le champ	placeholder="exemple@mail.com"
required	Champ obligatoire	required
value	Valeur par défaut	value="Paris"
min / max	Valeurs min/max	min="18" max="99"

Une distinction importante : name et id se ressemblent mais n’ont pas le même rôle. Le name est l’étiquette sous laquelle la donnée arrive côté serveur — sans lui, le champ n’est tout simplement pas transmis. L”id, lui, sert à l’identifier dans la page, notamment pour l’associer à son étiquette <label>. Notez aussi que placeholder n’est qu’une aide passagère qui disparaît dès la saisie : il ne remplace jamais un vrai <label>.

<label> — Étiquette de champ

Rôle : associer un texte descriptif à un champ. L’association se fait en reliant l’attribut for du label à l”id du champ.

<label for="email-input">Email :</label>
<input type="email" id="email-input" name="email">

Ce lien apporte deux avantages concrets : il améliore l”accessibilité (le lecteur d’écran annonce l’intitulé du champ au moment où l’on s’y place) et il agrandit la zone cliquable (cliquer sur le texte place le curseur dans le champ — précieux pour une petite case à cocher).

Méthode : Toujours étiqueter ses champs

Associez systématiquement un <label> à chaque champ de saisie, via for/id. Un formulaire sans étiquettes est difficilement utilisable au lecteur d’écran et pénible sur mobile. C’est l’une des règles d’accessibilité les plus simples à respecter — et l’une des plus souvent oubliées.

<textarea> — Zone de texte multilignes

Rôle : permettre la saisie de texte long, comme un commentaire ou un message. Contrairement à <input>, c’est une balise à contenu : elle possède une ouverture et une fermeture.

<label for="message">Votre message :</label>
<textarea id="message" name="message" rows="5" cols="40" 
          placeholder="Écrivez votre message ici..." required>
</textarea>

Deux attributs définissent sa taille initiale : rows (le nombre de lignes visibles) et cols (le nombre de colonnes). Ce ne sont que des dimensions de départ — l’utilisateur peut généralement redimensionner la zone, et en pratique on en fixe souvent la taille en CSS.

<select> — Liste déroulante

Rôle : proposer une sélection dans une liste d’options prédéfinies. Chaque choix possible est une balise <option>.

<label for="pays">Pays :</label>
<select id="pays" name="pays" required>
    <option value="">-- Choisissez un pays --</option>
    <option value="fr">France</option>
    <option value="be">Belgique</option>
    <option value="ch">Suisse</option>
</select>

Remarquez la première <option> à valeur vide : elle sert d’invite (« choisissez… ») et, combinée à required, force un choix conscient. L’attribut value de chaque option est ce qui sera réellement envoyé au serveur, indépendamment du texte affiché. Deux attributs utiles complètent l’usage : multiple autorise la sélection de plusieurs options, et selected présélectionne une option au chargement.

<button> — Bouton

La balise <button> déclenche une action. Son comportement dépend de son type.

Type	Comportement
submit	Soumet le formulaire (par défaut)
reset	Réinitialise le formulaire
button	Bouton neutre (pour JavaScript)

<button type="submit">Envoyer</button>
<button type="reset">Réinitialiser</button>

Une subtilité à connaître : à l’intérieur d’un formulaire, un <button> sans type explicite vaut submit. Pensez donc à préciser type="button" pour un bouton qui ne doit pas envoyer le formulaire (par exemple un bouton géré par JavaScript), sous peine de soumissions intempestives.

💡 Préférez <button> à <input type="submit"> : <button> peut contenir du HTML (texte, icône, mise en forme), là où <input> se limite à une valeur textuelle. Plus flexible, donc.

<fieldset> et <legend> — Regroupement de champs

Rôle : regrouper, visuellement et sémantiquement, des champs qui vont ensemble. <fieldset> délimite le groupe, <legend> lui donne un titre.

<form>
    <fieldset>
        <legend>Informations personnelles</legend>
        
        <label for="nom">Nom :</label>
        <input type="text" id="nom" name="nom" required>
        
        <label for="email">Email :</label>
        <input type="email" id="email" name="email" required>
    </fieldset>
</form>

Ce regroupement n’est pas que décoratif : il améliore l’accessibilité (le lecteur d’écran annonce la légende du groupe), apporte une structure visuelle claire, et dessine une bordure automatique que l’on peut entièrement styliser en CSS. Sur un long formulaire découpé en sections — coordonnées, paiement, préférences — le <fieldset> rend l’ensemble nettement plus lisible.

Exemple de formulaire complet

Voici un formulaire d’inscription qui rassemble la plupart des éléments précédents. Lisez-le comme une synthèse : chaque champ est étiqueté, certains sont obligatoires, et un bouton clôt le tout.

<form action="inscription.php" method="POST">
    <label for="nom">Nom :</label>
    <input type="text" id="nom" name="nom" required>
    
    <label for="email">Email :</label>
    <input type="email" id="email" name="email" required>
    
    <label for="pays">Pays :</label>
    <select id="pays" name="pays">
        <option value="fr">France</option>
        <option value="be">Belgique</option>
    </select>
    
    <label for="message">Message :</label>
    <textarea id="message" name="message" rows="4"></textarea>
    
    <label>
        <input type="checkbox" name="cgv" required>
        J'accepte les CGV
    </label>
    
    <button type="submit">Envoyer</button>
</form>

Notez la dernière étiquette : la case à cocher est placée à l’intérieur du <label>. C’est une autre façon, parfaitement valide, d’associer un champ à son texte, particulièrement pratique pour les cases à cocher.

Validation HTML5

HTML5 offre une validation côté client native : le navigateur vérifie certaines règles avant même l’envoi, sans qu’on écrive le moindre script.

Attribut	Validation
required	Champ obligatoire
type="email"	Format email valide
type="url"	Format URL valide
min / max	Valeurs min/max
pattern	Expression régulière personnalisée

<input type="email" name="email" required>
<input type="number" name="age" min="18" max="99">
<input type="text" name="cp" pattern="[0-9]{5}" placeholder="75001">

L’attribut pattern est le plus puissant : il accepte une expression régulière, ici [0-9]{5} pour exiger exactement cinq chiffres (un code postal français).

⚠️ Sécurité : la validation côté client est un confort pour l’utilisateur, pas une protection. Elle se contourne en quelques secondes (il suffit de désactiver JavaScript ou de modifier la page). Il faut toujours valider côté serveur également — c’est là que se joue la vraie sécurité.