Créer un formulaire en HTML : champs et validation native
Le formulaire est l’outil qui permet à un site de récolter des informations : une adresse e-mail pour une newsletter, un message de contact, une commande. Côté technique, il y a deux moitiés : la partie front-end (les champs que l’utilisateur voit et remplit) et la partie back-end (le serveur qui reçoit et stocke les données). Ce cours couvre toute la partie front-end en HTML moderne. Si vous découvrez le HTML, commencez par les bases pour bien débuter en HTML avant de continuer.
Tous les exemples de cette page ont été exécutés dans Chrome 150 pendant la rédaction : les comportements décrits (messages d’erreur compris) sont ceux réellement observés.
La balise form : le point de départ
Tout formulaire commence par la balise form. Elle englobe tous les champs et porte deux attributs importants : action (l’adresse à laquelle les données sont envoyées) et method (la façon de les envoyer, presque toujours post pour un formulaire). Le traitement de ces données se passe côté serveur, un mécanisme expliqué dans le cours comment fonctionne un site web.
<form action="/traitement" method="post">
<!-- les champs viendront ici -->
</form>Récupérer du texte : input et label
Le champ texte et son étiquette
Le champ le plus courant est la balise input avec l’attribut type="text". Chaque champ doit être accompagné d’une balise label : c’est l’étiquette cliquable qui décrit le champ. On relie les deux en donnant au champ un id et au label un attribut for avec la même valeur. L’attribut name, lui, est indispensable : c’est le nom sous lequel la donnée sera envoyée au serveur (un champ sans name n’envoie rien).
<label for="prenom">Votre prénom</label>
<input type="text" id="prenom" name="prenom" placeholder="Ex : Camille">L’attribut placeholder affiche un texte indicatif en grisé dans le champ. Attention : il disparaît dès que l’utilisateur tape, il complète donc le label mais ne le remplace pas.
Les types modernes : email, number, date
En 2018, la première version de cet article ne montrait que type="text". Aujourd’hui, il faut utiliser le type qui correspond à la donnée attendue : le navigateur adapte le clavier sur mobile et applique une première validation tout seul.
<label for="email">Votre adresse e-mail</label>
<input type="email" id="email" name="email" required>
<label for="age">Votre âge</label>
<input type="number" id="age" name="age" min="9" max="120">
<label for="naissance">Votre date de naissance</label>
<input type="date" id="naissance" name="naissance">Concrètement, voici ce que ces types changent, tel qu’observé dans Chrome 150 : un champ type="number" ignore purement et simplement les lettres (taper « abc » laisse le champ vide) et refuse 150 quand max="120" avec le message « Cette valeur doit être inférieure ou égale à 120. ». Un champ type="date" ouvre un calendrier au clic et n’accepte en interne que le format AAAA-MM-JJ : lui donner « 15/03/1990 » le laisse vide, « 1990-03-15 » est accepté.
La validation native : required bloque l’envoi
L’attribut required rend un champ obligatoire : tant qu’il est vide ou invalide, le navigateur refuse d’envoyer le formulaire, sans une ligne de JavaScript. Testé dans Chrome 150 : soumettre le formulaire avec le champ e-mail vide affiche « Veuillez renseigner ce champ. » et bloque l’envoi ; saisir « jean.dupont » (sans arobase) dans un type="email" le bloque aussi, avec le message « Veuillez inclure « @ » dans l’adresse e-mail. ». Cette validation native est votre première ligne de défense, mais elle ne remplace pas la vérification côté serveur : un utilisateur mal intentionné peut toujours contourner le navigateur.
Collecter un texte long : textarea
Pour un message, un commentaire ou une remarque, le champ d’une seule ligne ne suffit plus. On utilise la balise textarea, avec les attributs rows et cols qui définissent sa taille par défaut (en pratique, on la dimensionne plutôt en CSS avec width et height). Si le texte dépasse la zone, une barre de défilement apparaît automatiquement.
<label for="message">Votre message</label>
<textarea id="message" name="message" rows="6" cols="40"></textarea>Cases à cocher et boutons radio
Choix multiples : checkbox
Pour proposer plusieurs options cumulables, on utilise type="checkbox". Chaque case porte le même name et une value différente : c’est cette valeur qui est envoyée au serveur pour chaque case cochée. L’attribut checked coche une case par défaut. La balise fieldset et sa légende legend regroupent visuellement les options d’une même question.
<fieldset>
<legend>Moyens de paiement acceptés</legend>
<label><input type="checkbox" name="paiement" value="carte" checked> Carte bancaire</label>
<label><input type="checkbox" name="paiement" value="paypal"> PayPal</label>
<label><input type="checkbox" name="paiement" value="virement"> Virement</label>
</fieldset>Choix unique : radio
Quand une seule réponse est possible, on passe à type="radio". La subtilité : tous les boutons d’un même groupe doivent partager exactement le même name. C’est ce qui les rend mutuellement exclusifs, vérifié dans Chrome 150 : cocher « Texte brut » décoche automatiquement « HTML ».
<fieldset>
<legend>Format de la newsletter</legend>
<label><input type="radio" name="format" value="html" checked> HTML</label>
<label><input type="radio" name="format" value="texte"> Texte brut</label>
</fieldset>La liste déroulante : select et option
Pour choisir une valeur parmi une longue liste (un pays par exemple), la balise select est plus adaptée que des dizaines de boutons radio. Chaque entrée est une balise option dont l’attribut value est la valeur envoyée au serveur. Par défaut, c’est la première option qui est sélectionnée.
<label for="pays">Votre pays</label>
<select id="pays" name="pays">
<option value="fr">France</option>
<option value="be">Belgique</option>
<option value="ch">Suisse</option>
<option value="ca">Canada</option>
</select>Envoyer le formulaire : le bouton submit
Dernière pièce : le bouton d’envoi. La façon moderne de l’écrire est la balise button avec type="submit" (le texte du bouton se met simplement entre les balises, plus lisible que l’ancien <input type="submit" value="…"> que montrait la première version de cet article). Au clic, le navigateur lance la validation native vue plus haut, puis envoie les données à l’adresse indiquée dans action.
<button type="submit">Envoyer</button>À retenir
Un formulaire HTML, c’est une balise form qui regroupe des champs, chacun composé d’un trio label + input + name. Choisissez toujours le type de champ le plus précis (email, number, date…) : vous gagnez la validation native et un meilleur clavier mobile gratuitement. Pour situer le formulaire dans une page bien construite, revoyez les 6 balises d’architecture HTML. La suite logique de ce cours, c’est la partie back-end : recevoir et stocker ces données côté serveur.
N’hésitez pas à poser vos questions en commentaire.