Атрибут step тега <input>
Описание
Атрибут step определяет шаг изменения значения для числовых полей ввода (number, range) и полей даты/времени. Указывает допустимые значения приращения и влияет на поведение стрелочек в поле ввода.
<!-- Числовое поле с шагом 5 -->
<label for="quantity">Количество (шаг 5):</label>
<input type="number" id="quantity" name="quantity"
min="0" max="100" step="5" value="10">
<!-- Поле времени с шагом 15 минут -->
<label for="meeting-time">Время встречи:</label>
<input type="time" id="meeting-time" name="meeting-time"
step="900"> <!-- 900 секунд = 15 минут -->
Поддерживаемые типы input:
| Тип | Формат step | Пример |
|---|---|---|
| number | Целое или дробное число | step="0.5" |
| range | Целое или дробное число | step="10" |
| date | Дни (в секундах) | step="86400" (1 день) |
| time | Секунды | step="1800" (30 минут) |
| datetime-local | Секунды | step="3600" (1 час) |
| month | Месяцы (в секундах) | step="2592000" (~30 дней) |
Особые значения:
step="any"- разрешает любые значения (отключает проверку)- Не указан - зависит от типа (1 для number, 60 для time и т.д.)
Пример с календарём:
<label for="delivery-day">День доставки (только рабочие дни):</label>
<input type="date" id="delivery-day" name="delivery-day"
min="2023-11-01" step="7"> <!-- Только понедельники -->
Рекомендации:
- Сочетайте с
minиmaxдля точного диапазона - Для денежных значений используйте step="0.01"
- Для процентов подойдет step="1" или step="5"
- Тестируйте поведение в разных браузерах
- Учитывайте логику бизнес-процессов при выборе шага
Ограничения:
- В некоторых мобильных браузерах интерфейс может отличаться
- Не поддерживает сложные правила (например, только чётные числа)
- Для datetime-local в Safari шаг игнорируется
- Требует JavaScript для сложной валидации
Примечание: Атрибут step особенно полезен для форм заказов, настроек и других интерфейсов, где важно ограничить ввод определёнными значениями. Для сложных сценариев рассмотрите использование JavaScript-библиотек с более гибкими настройками.