Un formulaire HTML sert à récupérer des informations saisies par un utilisateur. Dans ce cours, vous allez apprendre à créer une structure simple avec form, label, input et un bouton de validation, sans vous occuper pour l'instant des attributs de form ni du traitement en PHP.
À quoi sert un formulaire ?
Sur le web, un formulaire permet de faire saisir des informations à une personne. Cela peut être un nom, une adresse e-mail, un mot de passe, un message ou encore une recherche.
On retrouve des formulaires un peu partout : page de contact, inscription à une newsletter, connexion à un compte ou barre de recherche.
Dans tous les cas, l'idée reste la même : on affiche des champs, l'utilisateur les remplit, puis il valide l'ensemble.
Pour commencer, vous n'avez pas besoin d'apprendre tout le fonctionnement d'un formulaire d'un seul coup. Le plus important est d'abord de comprendre sa structure HTML de base.
<form> : la balise qui englobe un formulaire
La balise <form> sert de conteneur principal. C'est elle qui englobe tous les éléments du formulaire.
À l'intérieur, vous pourrez ensuite placer des labels, des champs et un bouton d'envoi.
Dans ce cours, nous allons volontairement rester simples. Nous n'allons donc pas encore parler des attributs de <form>, comme action ou method.
<form>
</form>
Pour l'instant, le formulaire est vide. Il sert seulement de cadre général.
<input> pour faire apparaître un champ
La balise <input> permet d'afficher un champ dans lequel l'utilisateur peut saisir une information.
Il existe plusieurs types de champs, mais pour une première approche, vous pouvez retenir qu'un <input> fait apparaître une zone à remplir.
<form>
<input type="text">
</form>
Ici, le formulaire contient déjà un champ. Ce n'est pas encore très parlant pour l'utilisateur, car rien n'indique ce qu'il doit écrire.
Pour donner un indice dans le champ, on peut aussi ajouter un attribut placeholder. Il affiche un petit texte d'exemple tant que le champ est vide.
<form>
<input type="text" placeholder="Votre prénom">
</form>
Le placeholder affiche ici un texte d'aide à l'intérieur du champ.
Attention ! Le placeholder peut être pratique pour guider rapidement l'utilisateur, mais il ne remplace pas un vrai <label>.
<label> pour nommer clairement un champ
La balise <label> sert à décrire le champ. Elle indique à l'utilisateur ce qu'il doit saisir.
Autrement dit, <input> affiche la zone de saisie, et <label> lui donne un nom clair.
<form>
<label for="prenom">Prénom</label>
<input type="text" id="prenom">
</form>
Le label indique ici très clairement ce que l'utilisateur doit écrire dans le champ.
Le lien entre for="prenom" et id="prenom" est important. Il permet d'associer correctement le texte du label au bon champ.
<textarea> pour écrire un message plus long
Quand l'utilisateur doit écrire plusieurs lignes, comme dans un formulaire de contact, on n'utilise généralement pas un simple <input>.
On utilise plutôt une balise <textarea>, qui affiche une zone de texte plus grande et mieux adaptée à un message.
Comme pour un champ classique, il est important d'ajouter un <label> clair pour indiquer ce qu'il faut écrire.
<form>
<label for="message">Votre message</label>
<textarea id="message"></textarea>
</form>
Le <textarea> sert à saisir un texte plus long qu'un simple champ sur une ligne.
Retenez donc ceci : <input> convient très bien pour une information courte, tandis que <textarea> est plus adapté à un commentaire ou à un message.
required pour rendre un champ obligatoire
Dans un formulaire, certains champs peuvent être facultatifs, mais d'autres doivent absolument être remplis avant l'envoi.
Pour indiquer cela en HTML, on ajoute l'attribut required sur un champ. Le navigateur comprendra alors que l'utilisateur doit le compléter avant de valider le formulaire.
Cet attribut fonctionne aussi bien sur un <input> que sur un <textarea>.
<form>
<label for="email">Adresse e-mail</label>
<input type="email" id="email" required>
<label for="message">Votre message</label>
<textarea id="message" required></textarea>
</form>
Avec required, le navigateur vérifie qu'un champ obligatoire n'est pas laissé vide.
Attention ! required est une aide côté navigateur. C'est très pratique pour guider l'utilisateur, mais cela ne remplace pas les vérifications côté serveur.
submit pour valider un formulaire
Une fois les champs affichés, il faut généralement prévoir un bouton pour envoyer ou valider le formulaire.
Pour cela, on peut utiliser un <input> de type submit.
<form>
<label for="prenom">Prénom</label>
<input type="text" id="prenom">
<input type="submit" value="Envoyer">
</form>
Le mot submit signifie ici que l'utilisateur valide le formulaire. Pour l'instant, nous ne traitons pas encore ce qui se passe après le clic.
Retenez simplement qu'un formulaire complet contient souvent au minimum :
-
une balise
<form> -
un ou plusieurs
<label> -
un ou plusieurs
<input> - un bouton de validation
Les bonnes pratiques d'accessibilité
Même sur un formulaire très simple, il est important de prendre de bonnes habitudes dès le début.
La première consiste à toujours associer un <label> à son champ. Sans cela, le formulaire est moins clair, et il devient aussi moins pratique pour certaines technologies d'assistance.
La deuxième consiste à choisir des textes explicites. Un label comme Prénom ou Adresse e-mail aide immédiatement l'utilisateur à comprendre ce qu'on attend de lui.
La troisième consiste à éviter de se reposer uniquement sur un texte temporaire dans le champ. Un vrai label visible reste beaucoup plus fiable.
Vous pouvez aussi améliorer le confort d'utilisation avec les pseudo-classes CSS :hover et :focus. La première permet de réagir au survol de la souris, et la seconde au moment où un champ ou un bouton reçoit le focus.
Par exemple, il est utile de prévoir un style visible sur :focus pour que l'utilisateur repère facilement le champ actif, surtout s'il navigue au clavier. Le :hover peut aussi aider à mieux faire comprendre qu'un bouton est interactif.
input:focus {
outline: 2px solid #007890;
}
input[type="submit"]:hover {
background: #005f70;
}
Un style de hover ou de focus aide l'utilisateur à mieux repérer les éléments interactifs du formulaire.
Attention ! Un formulaire peut sembler simple visuellement, mais si ses champs sont mal nommés ou mal reliés, il devient vite plus difficile à utiliser.
Pour aller plus loin
Une fois cette structure bien comprise, vous pouvez passer au cours Les champs textes pour découvrir plus précisément les champs de saisie les plus courants.