Атрибут HTML: step

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

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

Значение шага по умолчанию для элементов ввода number равно 1, что позволяет вводить только целые числа, за исключением случаев, когда основа шага не является целым числом. Значение шага по умолчанию для time равно 60 секундам, где 900 соответствует 15 минутам.

Если 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 определяет допустимые значения, даже если атрибут 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>