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 dans le formulaire.
Les attributs courants sont type, name, value, placeholder, required, disabled, min, max, pattern, for, autocomplete, etc.
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 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.
La création d’un formulaire HTML repose sur un ensemble de balises spécifiques qui définissent les champs de saisie, les boutons, les listes déroulantes et d’autres éléments interactifs.
Ces balises sont accompagnées d’attributs qui précisent leur fonctionnement, leur validation et leur accessibilité.
<form>La balise <form> est le conteneur principal qui englobe tous les éléments 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 (par ex. multipart/form-data pour les fichiers).target : Cible où ouvrir la réponse (_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>
La balise crée un champ de saisie interactif.
Attributs courants :
type : Type de champ (text, password, checkbox, radio, email, etc.)
name : Nom du champ.
value : Valeur par défaut.
placeholder : Texte d’indication.
required : Champ obligatoire.
disabled : Désactive le champ.
readonly : Non modifiable.
min, max : Limites de valeur.
pattern : Expression régulière.
autocomplete : Active/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
Description :
Zone de texte multiligne pour les saisies longues.
Attributs courants :
Exemple :
<textarea name="message" rows="4" placeholder="Votre message"></textarea>
Description :
Crée un bouton cliquable (soumettre, réinitialiser, etc.).
Attributs courants :
type (submit, reset, button)
value : texte affiché (optionnel).
Exemple :
<button type="submit">Envoyer</button>
<button type="reset">Réinitialiser</button>
Description :
Associe un texte descriptif à un champ.
Attributs courants :
Exemple :
<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom">
Description :
Regroupe des champs et leur donne un titre.
Exemple :
<fieldset>
<legend>Informations personnelles</legend>
<label for="nom">Nom :</label>
<input type="text" id="nom" name="nom">
<label for="email">Email :</label>
<input type="email" id="email" name="email">
</fieldset>
Description :
Crée une liste déroulante.
Exemple :
<select name="pays">
<option value="fr">France</option>
<option value="be">Belgique</option>
</select>
Description :
Regroupe des options dans un <select>.
Exemple :
<select name="pays">
<optgroup label="Europe">
<option value="fr">France</option>
<option value="be">Belgique</option>
</optgroup>
</select>
<input list="pays">
<datalist id="pays">
<option value="France">
<option value="Belgique">
</datalist>
<output name="resultat" for="a b">Résultat</output>
<meter value="0.5" min="0" max="1">50%</meter>
<progress value="50" max="100">50%</progress>
Exemple d’utilisation
type
Définit le type de champ de saisie (text, password, checkbox, etc.).
<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 d'utilisateur">
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">
La création de formulaires web repose sur un ensemble structuré de balises HTML spécifiques, chacune jouant un rôle précis dans la saisie, la sélection, la soumission et l’accessibilité des données. Les balises principales telles que <form>, <input>, <textarea>, <select>, <button>, <label>, <fieldset> et <legend> sont indispensables pour construire un formulaire fonctionnel et ergonomique. Les balises de sélection (<select>, <option>, <optgroup>) permettent de proposer des choix à l’utilisateur, tandis que les balises avancées (<datalist>, <output>, <meter>, <progress>, <keygen>) offrent des fonctionnalités spécifiques pour des cas d’usage particuliers. Les attributs associés à ces balises permettent de contrôler précisément leur comportement, leur validation et leur accessibilité. Cette connaissance approfondie est essentielle pour concevoir des formulaires web efficaces, accessibles et conformes aux standards actuels.
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.