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 — 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).
L'IA a oublié tous les <label> ! Ce formulaire a des inputs sans label associé. Ajoutez un <label for="..."> pour chaque champ.
<label> ?