Attribut HTML : step

Baseline Widely available

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

L'attributstep est un nombre qui définit la granularité à laquelle la valeur doit adhérer ou le mot-cléany. Il est valide pour les types d'entrée numériques, y compris les typesdate,month,week,time,datetime-local,number etrange.

L'attributstep définit l'intervalle d'incrément lors du clic sur les boutons de sélection haut et bas, du déplacement d'un curseur sur une plage, et de la validation des différents types de date. S'il n'est pas explicitement inclus,step a pour valeur par défaut 1 pournumber etrange, et 1 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écialeany, ce qui signifie qu'aucun incrément n'est imposé et que toute valeur est autorisée (sous réserve d'autres contraintes, telles quemin etmax).

Seules les valeurs qui sont un nombre entier d'incréments à partir de la base de l'incrément sont valides. La base de l'incrément estmin si définie,value sinon, ou0 si aucune n'est fournie (sauf pourweek, qui a une base d'incrément par défaut de −259 200 000, représentant le début de la semaine1970-W01).

Syntaxe

Valeurs d'incrémentation par défaut
Type d'entrée	Valeur	Exemple
date	1 (jour)	`<input type="date" min="2019-12-25" step="1">`
month	1 (mois)	`<input type="month" min="2019-12" step="12">`
week	1 (semaine)	`<input type="week" min="2019-W23" step="2">`
time	60 (secondes)	`<input type="time" min="09:00" step="900">`
datetime-local	60 (secondes)	`<input type="datetime-local" min="2019-12-25T19:30" step="900">`
number	1	`<input type="number" min="0" step="0.1" max="10">`
range	1	`<input type="range" min="0" step="2" max="10">`

Sistep est omis, tout entier est valide mais les nombres à virgule comme4.2 ne le sont pas carstep a pour valeur par défaut1. Pour que4.2 soit valide :

soitstep doit être défini àany,0.1 ou0.2 ;
soit la valeur demin doit être un nombre se terminant par.2, comme0.2,1.2 ou-5.2.

Exemples

L'impact de`min` sur l'étape

Les valeurs demin etstep définissent ce que sont les valeurs valides, même si l'attributstep n'est pas inclus, carstep a par défaut la valeur0.

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 1,2 et une valeur d'étape de 2 :

html

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

Les valeurs valides comprennent1,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 de1.2 et plus.

Note :Lorsque les données saisies par l'utilisateur·ice 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.

VoirValidation côté client etstepMismatch pour plus d'informations.

Problèmes d'accessibilité

Fournissez des instructions pour aider les utilisateur·ice·s à 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'attributmin, assurez-vous que cette exigence minimale est comprise par l'utilisateur·ice. Fournir des instructions dans l'élément HTML<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'utiliseraria-labelledby ouaria-describedby.