step атрибут HTML

Атрибут step — это число, задающее шаг, которому должно соответствовать значение, или ключевое слово any. Он допустим для числовых типов ввода, в том числе date, month, week, time, datetime-local, number и range.

Атрибут step задаёт интервал шага при нажатии кнопок увеличения и уменьшения, перемещении ползунка диапазона влево и вправо, а также при проверке различных типов даты. Если атрибут step не указан явно, его значение по умолчанию равно 1 для number и range, а для типов ввода даты и времени — 1 единице (минута, неделя, месяц, день). Значение должно быть положительным числом — целым или дробным — либо специальным значением any, означающим, что шаг не задан и допустимо любое значение (при условии соблюдения других ограничений, таких как min и max).

Допустимы только значения, отстоящие от базового значения шага на целое число шагов. Базовым значением шага служит min, если оно задано, иначе — value, а если не задано ни одно из них — 0 (кроме week, для которого базовое значение шага по умолчанию равно −259,200,000 и соответствует началу недели 1970-W01).

Синтаксис

Если any не задан явно, допустимые значения для number, типов ввода даты и времени, а также типов ввода range равны базовому значению шага — значению min — и приращениям, равным значению шага, вплоть до значения max, если оно задано. В следующем примере допустимыми будут любые чётные целые числа, равные 10 или больше:

<input type="number" min="10" step="2" />

Если step не задан, допустимы любые целые числа, но дробные числа, например 4.2, недопустимы, поскольку значение step по умолчанию равно 1. Чтобы число 4.2 было допустимым:

• необходимо задать step равным any, 0.1 или 0.2;
• или значение min должно быть числом, заканчивающимся на .2, например 0.2, 1.2 или -5.2.

Примеры

Влияние min на шаг

Значение min определяет допустимые значения, даже если атрибут step не указан. Это происходит потому, что значение step по умолчанию равно 1 для типа ввода number.

В этом примере мы добавим большую красную рамку вокруг недопустимых полей ввода:

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

Затем зададим для поля ввода минимальное значение 1.2 и значение шага 2:

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

К допустимым значениям относятся 1.2, 3.2, 5.2, 7.2, 9.2, 11.2 и так далее. Допустимы только дробные числа с нечётной целой частью и дробной частью .2. Если есть счётчик чисел, он будет генерировать допустимые дробные значения, начиная с 1.2, с шагом 2.

Дополнительные сведения см. в разделах Проверка на стороне клиента и stepMismatch.

Особенности доступности

Предоставляйте инструкции, которые помогут пользователям понять, как заполнить форму и пользоваться отдельными элементами управления. Указывайте, какие поля обязательны и какие необязательны, форматы данных и другую важную информацию. При использовании атрибута min убедитесь, что пользователь понимает это минимальное требование. Для этого может быть достаточно добавить инструкции в <label>. Если инструкции размещены за пределами меток, что позволяет гибче выбирать их расположение и оформление, рассмотрите возможность использовать aria-labelledby или aria-describedby.

Спецификации

Совместимость с браузерами

См. также

• max
• min
• Проверка ограничений
• Проверка формы
• validityState.stepMismatch
• :out-of-range
• <input>
• Типы date, month, week, time, datetime-local, number и range, а также <meter>