Les formulaires web sont un élément fondamental de l’interaction entre les utilisateurs et les sites web. Ils permettent la saisie, la sélection et la soumission de données. Les balises HTML essentielles pour les formulaires incluent
<form>,<input>,<textarea>,<select>,<option>,<button>,<label>,<fieldset>,<legend>,<datalist>,<output>, etc. Chaque balise a des attributs spécifiques qui contrôlent son comportement et son apparence. Certaines balises améliorent l’accessibilité et la structure, comme<label>,<legend>, et les attributs ARIA. Des balises moins courantes mais utiles existent, telles que<meter>,<progress>, et<keygen>(obsolète).
Les formulaires web permettent la saisie, la sélection et la soumission de données. Leur création repose sur un ensemble de balises HTML spécifiques, accompagnées d’attributs qui précisent leur fonctionnement, leur validation et leur accessibilité. Ce document propose une liste détaillée et commentée des balises HTML liées aux formulaires, en mettant l’accent sur celles qui sont les plus couramment utilisées.
<form>La balise <form> est le conteneur principal d’un formulaire. Elle définit la zone où les données seront saisies et soumises.
Attributs courants :
action : URL où les données du formulaire seront envoyées.method : Méthode HTTP utilisée pour l’envoi (GET ou POST).enctype : Type de codage des données (ex. : multipart/form-data pour les fichiers).target : Cible où ouvrir la réponse (ex. : _blank pour une nouvelle fenêtre).novalidate : Désactive la validation HTML5 du formulaire.Exemple :
<form action="/submit-form" method="post" enctype="multipart/form-data">
<!-- Éléments du formulaire ici -->
</form>
<input>La balise <input> crée un champ de saisie interactif. Son attribut type définit le type de données attendu.
Attributs courants :
type : Type de champ (text, password, checkbox, radio, number, email, date, etc.).name : Nom du champ, utilisé pour identifier la donnée soumise.value : Valeur par défaut du champ.placeholder : Texte d’indication visible dans le champ vide.required : Indique que le champ est obligatoire.disabled : Désactive le champ.readonly : Rend le champ non modifiable.min et max : Valeurs minimales et maximales autorisées (pour les types numériques).pattern : Expression régulière pour valider la saisie.autocomplete : Active ou désactive l’autocomplétion.Exemple :
<input type="text" name="username" placeholder="Nom d'utilisateur" required>
<input type="checkbox" name="accept" value="yes"> J'accepte les conditions
<textarea>La balise <textarea> crée une zone de texte multiligne.
Attributs courants :
name : Nom du champ.rows : Nombre de lignes visibles.cols : Nombre de colonnes visibles.placeholder : Texte d’indication.required : Champ obligatoire.maxlength et minlength : Longueur maximale et minimale du texte.Exemple :
<textarea name="message" rows="4" placeholder="Votre message"></textarea>
<button>La balise <button> crée un bouton cliquable.
Attributs courants :
type : Type de bouton (submit, reset, button).value : Texte affiché sur le bouton.Exemple :
<button type="submit">Envoyer</button>
<button type="reset">Réinitialiser</button>
<label>La balise <label> associe un texte à un champ de formulaire, améliorant l’accessibilité.
Attributs courants :
for : Lie le label à l’attribut id d’un champ.Exemple :
<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom">
<fieldset> et <legend>La balise <fieldset> regroupe plusieurs éléments liés, tandis que <legend> fournit un titre pour ce groupe.
Attributs courants :
disabled : Désactive tous les éléments du groupe.form : Associe le groupe à un formulaire spécifique.name : Nom du groupe.Exemple :
<fieldset>
<legend>Informations personnelles</legend>
<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom">
</fieldset>
<select>La balise <select> crée une liste déroulante.
Attributs courants :
name : Nom du champ.required : Liste obligatoire.multiple : Permet la sélection multiple.size : Nombre d’options visibles sans dérouler.Exemple :
<select name="pays">
<option value="fr">France</option>
<option value="be">Belgique</option>
</select>
<option>La balise <option> définit une option dans une liste déroulante.
Attributs courants :
value : Valeur associée à l’option.selected : Préselectionne l’option.disabled : Désactive l’option.label : Texte alternatif pour l’option.Exemple :
<option value="fr" selected>France</option>
<optgroup>La balise <optgroup> regroupe plusieurs options dans une liste déroulante.
Attributs courants :
label : Texte du groupe.disabled : Désactive le groupe.Exemple :
<select name="pays">
<optgroup label="Europe">
<option value="fr">France</option>
<option value="be">Belgique</option>
</optgroup>
</select>
<datalist>La balise <datalist> fournit une liste de valeurs suggérées pour un champ <input>.
Exemple :
<input list="pays">
<datalist id="pays">
<option value="France">
<option value="Belgique">
</datalist>
<output>La balise <output> affiche le résultat d’un calcul ou d’une opération JavaScript.
Attributs courants :
for : Identifie les éléments liés au calcul.form : Associe l’élément à un formulaire.name : Nom de l’élément.Exemple :
<output name="resultat" for="a b">Résultat</output>
<meter>La balise <meter> représente une valeur scalaire dans une plage connue.
Attributs courants :
value : Valeur actuelle.min et max : Valeurs minimales et maximales.low, high, optimum : Seuils et valeur optimale.Exemple :
<meter value="0.5" min="0" max="1">50%</meter>
<progress>La balise <progress> représente la progression d’une tâche.
Attributs courants :
value : Valeur actuelle.max : Valeur maximale.Exemple :
<progress value="50" max="100">50%</progress>
<keygen>La balise <keygen> génère une paire de clés cryptographiques (obsolète).
Attributs courants :
challenge : Chaîne de défi.keytype : Type de clé.name : Nom du champ.Exemple :
<keygen name="key" challenge="randomstring">
| Attribut | Description | Exemple d’utilisation |
|---|---|---|
type |
Définit le type de champ de saisie. | <input type="text"> |
name |
Nom du champ, utilisé pour identifier la donnée soumise. | <input name="username"> |
value |
Valeur par défaut du champ. | <input value="default"> |
placeholder |
Texte d’indication visible dans le champ vide. | <input placeholder="Nom"> |
required |
Indique que le champ est obligatoire. | <input required> |
disabled |
Désactive le champ. | <input disabled> |
readonly |
Rend le champ non modifiable. | <input readonly> |
min |
Valeur minimale autorisée (pour les types numériques). | <input min="0"> |
max |
Valeur maximale autorisée (pour les types numériques). | <input max="100"> |
pattern |
Expression régulière pour valider la saisie. | <input pattern="[A-Za-z]{3}"> |
for |
Lie un label à un champ de formulaire via son id. |
<label for="nom">Nom :</label> |
autocomplete |
Active ou désactive l’autocomplétion pour les champs de saisie. | <input autocomplete="on"> |
Les formulaires web reposent sur un ensemble structuré de balises HTML, chacune jouant un rôle précis dans la saisie, la sélection, la soumission et l’accessibilité des données. Les balises principales (<form>, <input>, <textarea>, <select>, <button>, <label>, <fieldset>, <legend>) sont indispensables. Les balises avancées (<datalist>, <output>, <meter>, <progress>, <keygen>) offrent des fonctionnalités spécifiques. Les attributs associés permettent de contrôler précisément leur comportement et leur validation.
Cette synthèse est basée sur les références officielles MDN Web Docs et les spécifications HTML5 du W3C.
Cette formation est proposée par Deladev, studio web de Loïc D. — création de sites et d'applications, accompagnement et formation sur mesure.
Les projets réalisés · Prestations et tarifs · Le blog tech · Me contacter
Écrite par Loïc D. avec l'assistance de Claude (Anthropic) — un travail à deux.
© 2026 Deladev — publiée sous licence CC BY-NC-ND 4.0. Vous pouvez la lire, y renvoyer par un lien, la partager et la citer en créditant la source. La revendre, l'utiliser dans une prestation ou une formation payante, la republier même partiellement ailleurs, en diffuser une version modifiée ou l'exploiter pour entraîner un modèle d'IA nécessitent une autorisation écrite — pour un usage interne en entreprise, c'est souvent oui, il suffit de demander.