Attribut HTML : step

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

L'attribut step est un nombre qui indique l'incrément que la valeur doit suivre ou le mot-clé any. Il est valable pour les types de saisie numérique, notamment les date, month, week, time, datetime-local, number et range.

step définit l'incrément obtenu lors du clic sur les boutons déroulants haut et bas, du déplacement d'un curseur vers la gauche et la droite sur une plage, et de la validation des différents types de date. S'il n'est pas explicitement inclus, step prend par défaut la valeur 1 pour number et range, et 1 type d'unité (minute, semaine, mois, jour) pour les types d'entrée date/heure. La valeur doit être un nombre positif - entier ou flottant - ou la valeur spéciale any, ce qui signifie qu'aucun incrément n'est impliqué et que toute valeur est autorisée (sauf autres contraintes, comme min et max).

La valeur des incréments par défaut pour les entrées number est 1, ce qui permet de ne saisir que des nombres entiers, à moins que la valeur initiale ne soit pas un nombre entier. La valeur de pas par défaut pour les entrées time est de 1 seconde, 900 étant égal à 15 minutes.

Syntaxe

Valeurs d'incrémentation par défaut
Type d'entrée Valeur Exemple
date 1 (jour)
html

<input type="date" min="2019-12-25" step="1">
month 1 (mois)
html

<input type="month" min="2019-12" step="12">
week 1 (semaine)
html

<input type="week" min="2019-W23" step="2">
time 60 (secondes)
html

<input type="time" min="09:00" step="900">
datetime-local 1 (jour)
html

<input type="datetime-local" min="019-12-25T19:30" step="7">
number 1
html

<input type="number" min="0" step="0.1" max="10">
range 1
html

<input type="range" min="0" step="2" max="10">

Si any n'est pas explicitement défini, les valeurs valides pour les types de saisie number, date/heure, et les types d'entrée range sont égales à la base du pas — la valeur min et les incréments de la valeur du pas, jusqu'à la valeur max, si spécifiée. Par exemple, si on a <input type="number" min="10" step="2"> tout entier pair, 10 ou grand, est valide. S'il est omis, <input type="number">, tout entier est valide, mais les flottants, comme 4,2, ne le sont pas, car step est par défaut à 1. Pour que 4,2 soit valide, step aurait dû être défini à any, 0,1, 0,2, et la valeur min aurait dû être un nombre se terminant par .2, comme <input type="number" min="-5.2">.

L'impact de min sur step

Les valeurs de min et step définissent ce que sont les valeurs valides, même si l'attribut step n'est pas inclus, car step a par défaut la valeur 0.

Nous ajoutons une grande bordure rouge autour des entrées invalides :

css
input:invalid {
  border: solid red 3px;
}

Nous définissons ensuite un champ avec une valeur minimale de 7,2, en omettant l'attribut "step", qui a la valeur 1 par défaut.

html
<input id="myNumber" name="myNumber" type="number" step="2" min="1.2" />

Les valeurs valides comprennent 1,2, 3,2, 5,2, 7,2, 9,2, 11,2, et ainsi de suite. Les nombres entiers et les nombres pairs suivis de .2 ne sont pas valides. Comme nous avons inclus une valeur non valide, les navigateurs qui prennent en charge cette valeur l'afficheront comme non valide. Le compteur de nombres, s'il est présent, n'affichera que les valeurs flottantes valides de 1,2 et plus.

Note : Lorsque les données saisies par l'utilisateur ne respectent pas la configuration indiquée par l'incrément, la valeur est considérée comme non valide dans la validation des contraintes et correspondra aux pseudoclasses :invalid et :out-of-range.

Voir Validation côté client et stepMismatch pour plus d'informations.

Accessibilité

Fournissez des instructions pour aider les utilisateurs à comprendre comment remplir le formulaire et utiliser les contrôles individuels du formulaire. Indiquez toute entrée obligatoire et facultative, les formats de données et toute autre information pertinente. Lorsque vous utilisez l'attribut min, assurez-vous que cette exigence minimale est comprise par l'utilisateur. Fournir des instructions dans l'élément <label> peut être suffisant. Si vous fournissez des instructions en dehors des étiquettes, ce qui permet un positionnement et une conception plus souples, envisagez d'utiliser aria-labelledby ou aria-describedby.

Spécifications

Specification
HTML Standard
# attr-input-step

Voir aussi