La balise <form>
Un formulaire commence toujours par <form>. C'est le conteneur qui regroupe tous les champs. Sans cette balise, rien ne s'envoie.
Deux attributs importants :
action: où envoyer les données (URL du serveur)method: GET ou POST
GET met les données dans l'URL, ce qui est utile pour une recherche (on peut partager le lien). POST envoie les données de façon cachée, indispensable pour un mot de passe ou des données sensibles.
Les types d'input essentiels
<input type="text">: champ texte simple<input type="email">: validation email automatique<input type="password">: masque la saisie<input type="number">: que des chiffres<input type="tel">: clavier téléphone sur mobile<input type="date">: sélecteur de date natif<input type="checkbox">: case à cocher<input type="radio">: choix unique dans un groupe<input type="file">: upload de fichier
Le bon type améliore l'expérience utilisateur : clavier adapté sur mobile, validation automatique, et sélecteurs natifs.
Labels et accessibilité
Chaque champ doit avoir un <label> associé via l'attribut for. C'est la règle numéro 1 de l'accessibilité des formulaires.
Sans label :
- Les lecteurs d'écran ne savent pas à quoi sert le champ
- On ne peut pas cliquer sur le texte pour sélectionner le champ
Attention : le placeholder n'est pas un remplacement du label. Il disparaît dès qu'on tape, et il est souvent illisible (contraste trop faible).
Textarea, Select et Button
<textarea>: texte multi-lignes (commentaire, message). Contrairement à<input>, il a une balise fermante.<select>+<option>: menu déroulant. Chaque<option>est un choix possible.<button type="submit">: envoyer le formulaire. Préférez<button>à<input type="submit">car il peut contenir du HTML (icônes, etc.).
Validation native
HTML offre une validation gratuite, sans JavaScript :
required: champ obligatoireminlength,maxlength: longueur min/maxpattern: regex de validation personnalisée
Le navigateur bloque l'envoi si la validation échoue, et affiche un message d'erreur automatique. C'est gratuit et ça fonctionne partout !
The <form> tag
A form always starts with <form>. It's the container that holds all the fields. Without this tag, nothing gets submitted.
Two important attributes:
action— where to send the data (server URL)method— GET or POST
GET puts data in the URL — useful for searches (you can share the link). POST sends data hidden — essential for passwords and sensitive data.
Essential input types
<input type="text">— simple text field<input type="email">— automatic email validation<input type="password">— masks the input<input type="number">— numbers only<input type="tel">— phone keyboard on mobile<input type="date">— native date picker<input type="checkbox">— checkbox<input type="radio">— single choice in a group<input type="file">— file upload
The right type improves user experience: adapted keyboard on mobile, automatic validation, and native pickers.
Labels and accessibility
Every field must have a <label> linked via the for attribute. This is rule number 1 for form accessibility.
Without a label:
- Screen readers don't know what the field is for
- You can't click the text to focus the field
Warning: the placeholder is not a replacement for a label. It disappears once you type, and it's often unreadable (poor contrast).
Textarea, Select and Button
<textarea>— multi-line text (comments, messages). Unlike<input>, it has a closing tag.<select>+<option>— dropdown menu. Each<option>is a possible choice.<button type="submit">— submit the form. Prefer<button>over<input type="submit">because it can contain HTML (icons, etc.).
Native validation
HTML provides free validation, no JavaScript needed:
required— required fieldminlength,maxlength— min/max lengthpattern— custom validation regex
The browser blocks submission if validation fails — and shows an automatic error message. It's free and works everywhere!
Copiez ce prompt dans Claude ou ChatGPT :
Crée-moi un formulaire d'inscription avec : nom, email, mot de passe, confirmation mot de passe, date de naissance, acceptation CGU (checkbox), et un bouton s'inscrire. Ajoute la validation HTML native (required, minlength, type).
Sans relire le formulaire de l'IA : avec tes mots, comment rendre un champ email obligatoire et valide en HTML pur, sans une ligne de JavaScript ?
type="email" (le navigateur vérifie le format de l'adresse) et on ajoute l'attribut required (le champ devient obligatoire). À l'envoi, si le champ est vide ou mal formé, le navigateur bloque le formulaire et affiche un message d'erreur natif, sans aucun JavaScript. Bonus : minlength ou pattern pour aller plus loin.L'IA a oublié tous les <label> ! Ce formulaire a des inputs sans label associé. Ajoutez un <label for="..."> pour chaque champ.
L'IA te propose ce bouton d'envoi. Ton rôle de relecteur : l'accepter tel quel ou le rejeter, et dire pourquoi.
<div class="btn" onclick="envoyer()">Envoyer</div><div> cliquable n'est pas un bouton : il n'est pas focusable au clavier, ne réagit pas à la touche Entrée, n'est pas annoncé comme "bouton" par les lecteurs d'écran, et surtout ne déclenche pas l'envoi natif du formulaire ni la validation HTML (required, etc.). Le bon réflexe : <button type="submit">Envoyer</button>, qui soumet le formulaire et déclenche la validation gratuitement.Sans remonter dans la leçon : à quoi sert un <label> et comment l'associe-t-on à son champ ? Et pourquoi un placeholder ne le remplace pas ?
<label> décrit à quoi sert un champ. On l'associe en faisant correspondre son attribut for à l'id du champ (<label for="email"> + <input id="email">). Bénéfices : les lecteurs d'écran annoncent le champ, et cliquer sur le texte place le focus dedans. Le placeholder ne le remplace pas : il disparaît dès qu'on tape, a un contraste souvent trop faible, et n'est pas un vrai libellé accessible.<label> ?Your forms can now talk to the visitor. To finish the course on a high note, we move to attributes and best practices: accessibility, id and class attributes, and the pro habits that make HTML clean and durable.
Lesson 8: Attributes and best practices →