Guide HTML5 : tous les attributs formulaires expliqués

Introduction

Un formulaire HTML est un ensemble de champs qui permettent aux utilisateurs d'entrer des données et de les envoyer à un serveur. C'est comment vous capturez les adresses email, les mots de passe, les commentaires, et bien plus.

Les formulaires sont au cœur de chaque application web :

Les éléments de base

Tout formulaire HTML est composé de quelques éléments clés. Voici les plus importants :

<form> — Le conteneur principal

C'est la balise racine qui encadre tous les champs d'un formulaire :

<form action="/envoyer" method="POST">
    <input type="email" name="email" placeholder="Votre email">
    <button type="submit">Envoyer</button>
</form>

L'attribut action indique où envoyer les données (ex: /api/login). L'attribut method indique GET (données visibles dans l'URL) ou POST (plus sécurisé).

<input> — Le roi des champs

C'est l'élément le plus utilisé. Son attribut type change complètement son comportement :

<input type="email" name="email" placeholder="Entrez votre email">
<input type="password" name="password" placeholder="Mot de passe">
<input type="checkbox" name="conditions" id="conditions">
<input type="radio" name="genre" value="homme">

<label> — Accessibilité obligatoire

<label> relie du texte à un champ. C'est essentiel pour l'accessibilité : quand l'utilisateur clique sur le texte du label, le focus va sur l'input :

<label for="email">Email</label>
<input type="email" id="email" name="email">

<select> et <textarea> — Les autres champs importants

Pour une liste déroulante :

<label for="pays">Pays</label>
<select id="pays" name="pays">
    <option value="">-- Choisir --</option>
    <option value="fr">France</option>
    <option value="be">Belgique</option>
</select>

Pour du texte multiligne :

<label for="message">Message</label>
<textarea id="message" name="message" rows="5" placeholder="Votre message..."></textarea>

Tous les types d'input

L'attribut type est le plus puissant d'un input. Il change le rendu visuel et ajoute une validation automatique. Voici TOUS les types disponibles :

Attributs universels des inputs

Ces attributs fonctionnent sur presque tous les inputs pour contrôler leur comportement :

name — L'identifiant du champ (OBLIGATOIRE pour envoyer les données)

C'est le nom utilisé pour accéder aux données. Quand le formulaire est soumis, les données sont envoyées comme name=value :

<input type="email" name="email">
<!-- Résultat : email=utilisateur@exemple.com -->

id — L'identifiant unique (pour lier avec label et CSS)

L'attribut id crée un identifiant unique pour un élément. Utilisé pour les labels et JavaScript :

<label for="email">Email</label>
<input type="email" id="email" name="email">

type — Change le comportement et la validation

Voir la section précédente pour la liste complète. Choisissez le bon type pour chaque situation.

value — Valeur par défaut ou envoyée

C'est la valeur initiale affichée ou celle qui sera envoyée au serveur :

<input type="text" name="prenom" value="Jean">
<input type="radio" name="genre" value="homme">

placeholder — Texte d'exemple (disparaît quand on tape)

Affiche un exemple ou une instruction :

<input type="email" placeholder="exemple@email.com">

required — Rend le champ obligatoire

Le navigateur valide automatiquement que le champ n'est pas vide :

<input type="email" name="email" required>

disabled — Désactive le champ (grisé, non modifiable)

Utile pour les champs temporairement indisponibles :

<input type="text" name="code" disabled value="AUTO-GENERATED">

readonly — Lecture seule (affichage seulement, pas de modification)

Différent de disabled : la valeur est envoyée au serveur :

<input type="text" name="reference" readonly value="REF-12345">

autocomplete — Autocomplétion du navigateur

Permet au navigateur de suggérer des valeurs précédemment saisies :

<input type="email" name="email" autocomplete="email">
<input type="tel" name="phone" autocomplete="tel">

autofocus — Focus automatique au chargement

Place le curseur dans le champ dès que la page se charge :

<input type="text" name="recherche" autofocus placeholder="Chercher...">

form — Lie l'input à un formulaire spécifique

Permet à un input d'être en dehors du <form> mais toujours associé :

<form id="mon-form"></form>
<input type="email" form="mon-form" name="email">

Attributs de validation

HTML5 offre une validation côté client automatique. Ces attributs contraignent les valeurs acceptées :

min et max — Valeurs minimale et maximale

Pour les nombres et les dates :

<input type="number" name="age" min="18" max="120">
<input type="date" name="naissance" min="1950-01-01" max="2024-12-31">

minlength et maxlength — Longueur du texte

Pour contrôler la longueur des inputs texte :

<input type="password" name="password" minlength="8" maxlength="50">
<textarea name="bio" maxlength="500" placeholder="Max 500 caractères"></textarea>

pattern — Expression régulière

Valide le format avec une regex personnalisée :

<!-- Code postal français (5 chiffres) -->
<input type="text" name="codepostal" pattern="[0-9]{5}" placeholder="75001">

<!-- Numéro de téléphone -->
<input type="tel" pattern="[0-9]{2} [0-9]{2} [0-9]{2} [0-9]{2} [0-9]{2}">

step — Pas d'incrément

Pour les nombres et les sliders :

<input type="number" name="prix" step="0.01" min="0">
<input type="range" name="volume" min="0" max="100" step="5">

multiple — Plusieurs valeurs

Pour files (plusieurs fichiers) et emails :

<input type="file" name="documents" multiple>
<input type="email" name="emails" multiple placeholder="email1@test.com, email2@test.com">

UX/Mobile : accessibilité et ergonomie

inputmode — Clavier mobile personnalisé

Force un clavier spécifique sur mobile. Très utile pour améliorer l'UX :

<input type="text" inputmode="numeric" placeholder="Code postal">
<input type="text" inputmode="email" placeholder="Email">
<input type="text" inputmode="tel" placeholder="Téléphone">
<input type="text" inputmode="url" placeholder="Site web">
<input type="text" inputmode="search" placeholder="Chercher...">

Les valeurs possibles sont : text, decimal, numeric, tel, email, url, search, none.

list et datalist — Suggestions d'autocomplétion

Fournit une liste de suggestions sans forcer l'utilisateur à choisir dedans :

<input type="text" name="browser" list="browsers">
<datalist id="browsers">
    <option value="Chrome">
    <option value="Firefox">
    <option value="Safari">
    <option value="Edge">
</datalist>

spellcheck — Vérification orthographique

Active ou désactive la vérification orthographique :

<textarea name="message" spellcheck="true"></textarea>

Accessibilité ARIA

ARIA (Accessible Rich Internet Applications) améliore l'accessibilité pour les personnes en situation de handicap :

aria-label — Description de l'élément

Donne un nom accessible quand il n'y a pas de label visuel :

<button aria-label="Fermer la fenêtre">✕</button>
<input type="search" aria-label="Chercher les produits">

aria-labelledby — Relie à un élément qui décrit

Utilise le texte d'un autre élément comme description :

<h2 id="form-title">Formulaire de contact</h2>
<form aria-labelledby="form-title"></form>

aria-describedby — Description détaillée

Fournit une explication supplémentaire :

<input type="password" aria-describedby="pwd-hint">
<p id="pwd-hint">Le mot de passe doit contenir 8 caractères minimum</p>

aria-required et aria-invalid — État du champ

Indique quand un champ est obligatoire ou invalide :

<input type="email" aria-required="true" aria-invalid="false">

aria-live — Mises à jour dynamiques

Annonce les mises à jour de contenu aux lecteurs d'écran :

<div aria-live="polite">Email envoyé avec succès</div>

Structures avancées

fieldset et legend — Grouper les champs

Organisez les champs liés ensemble. legend donne un titre au groupe :

<fieldset>
    <legend>Adresse personnelle</legend>
    <label>Rue<label>
    <input type="text" name="rue">
    <label>Ville</label>
    <input type="text" name="ville">
</fieldset>

<fieldset>
    <legend>Préférences</legend>
    <label><input type="checkbox" name="newsletter"> Recevoir la newsletter</label>
</fieldset>

optgroup — Regrouper les options select

Organisez les choix d'une liste déroulante en groupes :

<select name="ville">
    <optgroup label="Île-de-France">
        <option>Paris</option>
        <option>Versailles</option>
    </optgroup>
    <optgroup label="Provence">
        <option>Marseille</option>
        <option>Aix-en-Provence</option>
    </optgroup>
</select>

Exemples complets

Formulaire de contact simple

<form action="/api/contact" method="POST">
    <label for="nom">Nom</label>
    <input type="text" id="nom" name="nom" required>

    <label for="email">Email</label>
    <input type="email" id="email" name="email" required>

    <label for="sujet">Sujet</label>
    <select id="sujet" name="sujet" required>
        <option value="">-- Choisir --</option>
        <option value="general">Question générale</option>
        <option value="support">Support technique</option>
    </select>

    <label for="message">Message</label>
    <textarea id="message" name="message" rows="5" required></textarea>

    <button type="submit">Envoyer</button>
</form>

Formulaire d'inscription

<form action="/api/signup" method="POST">
    <label for="username">Nom d'utilisateur</label>
    <input type="text" id="username" name="username" minlength="3" maxlength="20" required>

    <label for="email">Email</label>
    <input type="email" id="email" name="email" required>

    <label for="password">Mot de passe</label>
    <input type="password" id="password" name="password" minlength="8" required>

    <fieldset>
        <legend>Genre</legend>
        <label><input type="radio" name="genre" value="h"> Homme</label>
        <label><input type="radio" name="genre" value="f"> Femme</label>
        <label><input type="radio" name="genre" value="a"> Autre</label>
    </fieldset>

    <label><input type="checkbox" name="conditions" required> J'accepte les conditions</label>

    <button type="submit">S'inscrire</button>
</form>

Formulaire de recherche

<form action="/search" method="GET">
    <input type="search" name="q" placeholder="Chercher..." autofocus>
    <button type="submit">Rechercher</button>
</form>

Bonnes pratiques

Pour créer des formulaires de qualité, suivez ces principes :

Conclusion

Les formulaires HTML5 sont puissants et faciles à maîtriser. Vous disposez maintenant de tous les outils pour créer des formulaires accessibles, rapides et conviviaux.