Définition et utilisation de l'attribut step
LES BALISES HTMLL'attribut step spécifie les intervalles numériques — le pas — autorisés pour un élément <input>. Sans lui, le navigateur applique un pas par défaut de 1, sauf pour time et datetime-local où le pas par défaut est de 60 secondes.
Astuce : L'attribut step se combine avec min et max pour verrouiller une plage de valeurs précise — par exemple un pas de 5 entre un minimum de 0 et un maximum de 100.
Remarque : step fonctionne uniquement avec certains types d'input : number, range, date, datetime-local, month, time et week. Sur un champ text ou email, l'attribut est simplement ignoré.
Syntaxe :
<input step="nombre">
Étape 1 — Ajouter un pas de 3 sur un champ number : quel comportement dans le navigateur ?
Sur un champ number, les flèches d'incrémentation intégrées au navigateur avancent par pas fixes plutôt qu'un par un. Avec step="3", les valeurs autorisées deviennent des multiples de 3 à partir de 0 : -3, 0, 3, 6, et ainsi de suite.
Exemple : 📋 Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Demo HTML5 Step</title>
</head>
<body>
<form action="page-cible.php">
Nom: <input type="text" name="nom"><br><br>
Email: <input type="email" name="email"><br><br>
Quantité : <input type="number" name="points" step="3"><br><br>
<input type="submit">
</form>
</body>
</html>
Résultat attendu :
Le champ "Quantité" affiche deux petites flèches. Chaque clic ajoute ou
retire 3 à la valeur : 0 → 3 → 6 → 9. Si l'utilisateur tape 7 puis valide
le formulaire, le navigateur refuse l'envoi et affiche un message du type
"Veuillez sélectionner une valeur valide, la plus proche est 6."
⚠ Ce contrôle se fait entièrement côté navigateur — un utilisateur qui désactive JavaScript ou modifie le HTML peut toujours envoyer 7 au serveur. La validation de step ne dispense jamais d'une vérification côté serveur.
Étape 2 — Adapter step aux dates et aux heures : quelle unité selon le type ?
La valeur de step ne s'exprime pas toujours en unités entières simples : son échelle dépend du type d'input. Sur date, step compte des jours ; sur time, des secondes ; sur month, des mois.
| Type d'input | Unité de step | Pas par défaut | Exemple |
|---|---|---|---|
| number / range | unités numériques | 1 | step="5" → 0, 5, 10, 15... |
| date | jours | 1 | step="7" → un jour par semaine |
| month | mois | 1 | step="3" → un mois par trimestre |
| week | semaines | 1 | step="2" → une semaine sur deux |
| time / datetime-local | secondes | 60 | step="900" → créneaux de 15 minutes |
En résumé : pour un rendez-vous par créneaux de 15 minutes sur un champ time, il faut écrire step="900" — 900 secondes — et non step="15", qui découperait l'heure en secondes et non en quarts d'heure.
Étape 3 — Autoriser n'importe quelle valeur avec step="any"
Le mot-clé any supprime toute contrainte de pas : le champ accepte alors n'importe quelle valeur dans les limites de min et max, décimales comprises. C'est le réglage courant pour un prix en centimes ou une mesure au dixième près.
Exemple : 📋 Copier le code
<label for="prix">Prix (€) :</label>
<input type="number" id="prix" name="prix" step="any" min="0">
Résultat attendu :
Le champ accepte 12, 12.5 ou 12.99 sans provoquer d'erreur de validation,
alors que le pas par défaut de 1 aurait bloqué 12.5.
Compatibilité des navigateurs
L'attribut step est pris en charge dans tous les navigateurs modernes. L'apparence des flèches et du message d'erreur varie légèrement d'un navigateur à l'autre, mais le comportement de validation reste identique.
Différences entre HTML 4.01 et HTML5
L'attribut step est une nouveauté introduite en HTML5, aux côtés des types number, range, date et de leurs variantes — aucun équivalent n'existait en HTML 4.01.
Retour à l'accueil du site
Par carabde | Mis à jour le 18 juillet 2026