Module 2Structurer et enrichir une page
Chapitre 10 sur 13
Les formulaires
Formulaires complets : champs, labels, choix, boutons, fieldset et validation native.
- ≈ 180 min
- 8 leçons
- 2 vidéos
- 3 exercices
Module 2Structurer et enrichir une page
Chapitre 10 sur 13
Formulaires complets : champs, labels, choix, boutons, fieldset et validation native.
Objectifs
Avec ce chapitre, tu sauras…
<form> et ses attributs action et method ;<label> ;<input> (text, email, password, number, date, checkbox, radio, file…) ;<select>, des zones de texte <textarea> et des boutons <button> ;<fieldset> et <legend> ;required, minlength, pattern, min, max.Un formulaire permet à l'utilisateur d'envoyer des informations : se connecter, s'inscrire, passer une commande, rechercher, laisser un message. HTML s'occupe de la structure et d'une première validation ; l'envoi et le traitement des données sont faits par un langage serveur (PHP, Python, Node.js) que tu apprendras plus tard. C'est le chapitre le plus long et l'un des plus demandés en entreprise.
Leçon 1
<form action="/inscription" method="post">
<label for="email">Adresse e-mail</label>
<input type="email" id="email" name="email">
<button type="submit">S'inscrire</button>
</form>Tableau: Les attributs de form
| Attribut | Rôle | Exemple |
|---|---|---|
action | l'adresse (URL) qui reçoit les données | action="/inscription", action="traitement.php" |
method | la façon d'envoyer : get ou post | method="post" |
enctype | obligatoire pour envoyer des fichiers | enctype="multipart/form-data" |
novalidate | désactive la validation du navigateur (pour tester) | <form novalidate> |
| GET | POST | |
|---|---|---|
| où vont les données ? | dans l'URL : recherche?q=tajine | dans le corps de la requête, invisible dans l'URL |
| visible / partageable ? | oui, on peut mettre l'URL en favori | non |
| taille | limitée | pas de limite pratique |
| usage | recherche, filtres, tri | connexion, inscription, paiement, envoi de fichier |
Vidéo · À regarder
FRHTML en 1 HEURE - Formation HTML complète en 2025
Melvynx · YouTube
Leçon 2
| Attribut | Rôle | Qui l'utilise ? |
|---|---|---|
id | identifiant unique du champ dans la page | le <label for>, le CSS, JavaScript |
name | nom de la donnée envoyée au serveur | le serveur : reçoit prenom=Anas |
value | valeur du champ (pré-remplie, ou envoyée pour une case à cocher) |
Leçon 3
type | Champ | Validation ou particularité |
|---|---|---|
text | texte sur une ligne | type par défaut |
email | adresse e-mail | vérifie la présence de @ |
password | mot de passe | caractères masqués |
tel | téléphone |
Leçon 4
| Situation | Choix |
|---|---|
| un seul choix parmi 2 à 5 options visibles | boutons radio |
| un seul choix parmi beaucoup d'options (pays, ville) | <select> |
| plusieurs choix possibles | cases à cocher |
| une seule case oui / non (accepter les conditions) | une case à cocher |
Leçon 5
type | Effet |
|---|---|
submit | envoie le formulaire (type par défaut d'un <button> dans un <form>) |
reset | remet tous les champs à leur valeur de départ (rarement utile) |
button | ne fait rien tout seul : on lui attache du JavaScript |
Leçon 6
Leçon 7
| Attribut | Rôle | Exemple |
|---|---|---|
required | champ obligatoire | <input name="nom" required> |
minlength / maxlength | longueur du texte | minlength="8" pour un mot de passe |
min / max / step | bornes d'un nombre ou d'une date | min="1" max="10" |
pattern |
Leçon 8
1Quel attribut détermine le nom de la donnée envoyée au serveur ?
2Pour un formulaire de connexion, on utilise…
3Pour que trois boutons radio soient exclusifs, ils doivent avoir…
4Le for d'un label doit correspondre…
5Un <button> sans type dans un formulaire est un bouton…
6La validation HTML (required, pattern)…
L'essentiel du chapitre
<form action="URL" method="get|post"> : GET pour lire (recherche), POST pour envoyer (connexion, inscription).<label for> relié à son id, et un name (sinon il n'est pas envoyé).type : text, email, password, tel, url, number, date, checkbox, radio, file, hidden…name, value différentes. <select> + <option>, <textarea>, <button type="...">.<fieldset> + <legend> pour regrouper. required, minlength, min/max, pattern, autocomplete.| le serveur |
url | adresse web | vérifie le format https://... |
number | nombre | accepte min, max, step |
range | curseur | accepte min, max, step |
date, time, datetime-local | date, heure | calendrier natif |
color | couleur | palette de couleurs |
search | recherche | petite croix pour effacer |
checkbox | case à cocher | choix multiples |
radio | bouton radio | choix unique dans un groupe |
file | envoi de fichier | accept=".pdf,image/*", multiple |
hidden | champ caché | donnée envoyée sans être affichée |
<input list="..."> + <datalist> |
`<textarea>` n'est pas un élément vide
| expression régulière à respecter |
pattern="0[5-7][0-9]{8}" (téléphone marocain) |
type="email" / url | format vérifié | — |
autocomplete | aide le navigateur à pré-remplir | autocomplete="email", "new-password" |
Vidéo · À regarder
ENHTML Full Course for Beginners | Complete All-in-One Tutorial | 4 Hours
Dave Gray · YouTube
Tableau: GET ou POST ?
GET pour lire (une recherche ne modifie rien), POST pour envoyer ou modifier des données. Un mot de passe ne doit jamais passer en GET : il apparaîtrait dans l'historique du navigateur et dans les journaux du serveur.
Le formulaire en cinq minutes : un bon premier contact avant la suite du chapitre, qui détaille chaque type de champ.
Un <label> est le libellé d'un champ. On le relie au champ en donnant au for du label la même valeur que l'id du champ. Cliquer sur le label place alors le curseur dans le champ, et le lecteur d'écran annonce le libellé quand on arrive sur le champ.
<!-- 1. avec for et id (la plus courante) -->
<label for="prenom">Prénom</label>
<input type="text" id="prenom" name="prenom">
<!-- 2. en mettant le champ dans le label -->
<label>
Nom
<input type="text" name="nom">
</label>Tableau: Les trois attributs à ne pas confondre
L'attribut type change complètement le comportement du champ. Sur mobile, il affiche aussi le bon clavier (numérique pour tel, avec @ pour email).
Tableau: Les types à connaître
Boutons radio : un seul choix
<p>Niveau en HTML :</p>
<input type="radio" id="debutant" name="niveau" value="debutant" checked>
<label for="debutant">Débutant</label>
<input type="radio" id="intermediaire" name="niveau" value="intermediaire">
<label for="intermediaire">Intermédiaire</label>
<input type="radio" id="avance" name="niveau" value="avance">
<label for="avance">Avancé</label>Tous les boutons d'un même groupe ont le même name : c'est ce qui les rend exclusifs (cocher l'un décoche les autres). Chacun a une value différente : c'est elle qui est envoyée (niveau=intermediaire). checked pré-sélectionne un bouton.
Cases à cocher : plusieurs choix
<p>Langages que tu connais :</p>
<input type="checkbox" id="html" name="langages" value="html" checked>
<label for="html">HTML</label>
<input type="checkbox" id="css" name="langages" value="css">
<label for="css">CSS</label>
<input type="checkbox" id="js" name="langages" value="js">
<label for="js">JavaScript</label>
<input type="checkbox" id="cgu" name="cgu" required>
<label for="cgu">J'accepte les conditions générales d'utilisation</label>Liste déroulante : select
<label for="ville">Ville</label>
<select id="ville" name="ville">
<option value="">-- Choisis ta ville --</option>
<optgroup label="Nord">
<option value="tanger">Tanger</option>
<option value="tetouan">Tétouan</option>
</optgroup>
<optgroup label="Centre">
<option value="casablanca" selected>Casablanca</option>
<option value="rabat">Rabat</option>
</optgroup>
</select>Tableau: Quand utiliser quoi ?
<label for="message">Ton message</label>
<textarea id="message" name="message" rows="6" cols="40" maxlength="1000"></textarea>
<button type="submit">Envoyer</button>
<button type="reset">Effacer le formulaire</button>
<button type="button">Aperçu (géré par JavaScript)</button>Tableau: Les trois types de bouton
Un <button> placé dans un <form> sans attribut type est un bouton submit. Si tu ajoutes un bouton « Afficher le mot de passe » sans écrire type="button", il enverra le formulaire. Écris toujours le type de tes boutons.
<fieldset> regroupe des champs liés, et <legend> lui donne un titre. C'est indispensable pour un groupe de boutons radio ou de cases à cocher : le lecteur d'écran annonce la légende avant chaque option (« Niveau en HTML, Débutant, bouton radio »).
<fieldset>
<legend>Mode de paiement</legend>
<input type="radio" id="carte" name="paiement" value="carte" required>
<label for="carte">Carte bancaire</label>
<input type="radio" id="livraison" name="paiement" value="livraison">
<label for="livraison">Paiement à la livraison</label>
</fieldset>Le navigateur peut vérifier les champs avant l'envoi, sans une ligne de JavaScript, et afficher un message d'erreur.
Tableau: Les attributs de validation
<form action="/inscription" method="post">
<fieldset>
<legend>Tes informations</legend>
<label for="nom">Nom complet</label>
<input type="text" id="nom" name="nom" required autocomplete="name">
<label for="email">E-mail</label>
<input type="email" id="email" name="email" required autocomplete="email"
placeholder="exemple@mail.com">
<label for="mdp">Mot de passe (8 caractères minimum)</label>
<input type="password" id="mdp" name="mdp" required minlength="8"
autocomplete="new-password">
</fieldset>
<fieldset>
<legend>Formation souhaitée</legend>
<label for="formation">Formation</label>
<select id="formation" name="formation" required>
<option value="">-- Choisis --</option>
<option value="html-css">HTML et CSS</option>
<option value="javascript">JavaScript</option>
</select>
<p>Rythme :</p>
<input type="radio" id="jour" name="rythme" value="jour" required>
<label for="jour">En journée</label>
<input type="radio" id="soir" name="rythme" value="soir">
<label for="soir">En soirée</label>
</fieldset>
<label for="motivation">Pourquoi cette formation ?</label>
<textarea id="motivation" name="motivation" rows="5" maxlength="500"></textarea>
<input type="checkbox" id="cgu" name="cgu" required>
<label for="cgu">J'accepte le règlement de la formation</label>
<button type="submit">Envoyer ma candidature</button>
</form>Un formulaire professionnel est jugé sur quatre points : chaque champ a un label, les types sont corrects (le bon clavier sur mobile), l'autocomplétion fonctionne (autocomplete), et les messages d'erreur sont clairs. Le CSS et JavaScript amélioreront ensuite l'apparence et les messages, mais la base est toujours ce HTML.
Crée le formulaire de commande d'une pizzeria, avec trois fieldset : « Ta pizza » (taille en radio : petite, moyenne, grande ; suppléments en cases à cocher : fromage, champignons, olives), « Livraison » (adresse en textarea, téléphone validé par pattern, date et heure de livraison), « Paiement » (radio : en ligne, à la livraison). Ajoute un champ caché restaurant de valeur casa-centre.
Crée un formulaire de contact envoyé en POST vers /contact : nom (obligatoire), e-mail (obligatoire), objet (liste déroulante : Devis, Stage, Autre), message (obligatoire, 20 caractères minimum) et un bouton d'envoi. Chaque champ a un label relié.
<form action="/sondage" method="get">
<label>Ton prénom</label>
<input type="text" id="prenom">
<p>Ta couleur préférée :</p>
<input type="radio" name="rouge" value="rouge"> Rouge
<input type="radio" name="bleu" value="bleu"> Bleu
<label for="motdepasse">Mot de passe</label>
<input type="text" id="motdepasse" name="motdepasse">
<button>Effacer</button>
<button type="submit">Envoyer</button>
</form>Un champ sans attribut name n'est pas envoyé au serveur, même s'il est rempli. C'est l'erreur numéro un des débutants : « mon formulaire envoie des données vides ». Chaque champ qui doit être envoyé a un name.
placeholder="Votre e-mail" affiche un texte grisé qui disparaît dès qu'on tape. Ce n'est pas un label : l'utilisateur oublie ce qu'il devait écrire, et beaucoup de lecteurs d'écran l'ignorent. Le placeholder sert à donner un exemple (placeholder="exemple@mail.com"), en plus d'un vrai <label>.
<label for="age">Âge</label>
<input type="number" id="age" name="age" min="16" max="99">
<label for="naissance">Date de naissance</label>
<input type="date" id="naissance" name="naissance">
<label for="site">Site web</label>
<input type="url" id="site" name="site" placeholder="https://monportfolio.ma">
<label for="cv">Ton CV (PDF)</label>
<input type="file" id="cv" name="cv" accept=".pdf">Contrairement à <input>, <textarea> a une balise fermante, et son contenu est sa valeur par défaut. Attention : un espace ou un retour à la ligne entre <textarea> et </textarea> apparaît dans le champ.
<label for="tel">Téléphone (10 chiffres, ex. 0612345678)</label>
<input type="tel" id="tel" name="tel" required
pattern="0[5-7][0-9]{8}" title="10 chiffres commençant par 05, 06 ou 07"
autocomplete="tel">La validation du navigateur est un confort pour l'utilisateur, pas une sécurité : n'importe qui peut la désactiver avec les DevTools ou envoyer des données directement au serveur. Le serveur doit toujours revérifier toutes les données reçues. Règle d'or de la sécurité web : ne jamais faire confiance aux données envoyées par le client.
Le chapitre « Forms & Inputs » de Dave Gray (anglais) : 45 minutes, la vidéo de référence de ce chapitre. Découpe-la en deux séances et code chaque exemple en même temps que lui.