Атрибут HTML – step

Атрибут step (крок) – це число, що задає гранулярність, якій повинно відповідати значення, або ключове слово any (будь-який). Він дійсний для числових типів введення, включно з date, month, week, time, datetime-local, number і range.

step задає інтервал крокування при натисканні кнопок зі стрілками вгору і вниз, переміщенні повзунка вліво і вправо на діапазоні та валідуванні різних типів дат. Якщо він не вказаний явно, то 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

Значення min визначає дійсні значення, навіть якщо атрибут step не вказано. Це тому, що step для полів типу number усталено дорівнює 1.

У цьому прикладі додається велика червона межа навколо недійсних полів:

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.

[!NOTE] Коли дані, введені користувачем, не відповідають налаштуванням крокування, значення вважається недійсним при перевірці обмежень і буде відповідати псевдокласам :invalid та :out-of-range.

Більше інформації – у Валідації клієнтського боку та stepMismatch.

Занепокоєння щодо доступності

Слід надавати інструкції для користувачів з поясненням того, як заповнити форму та використовувати окремі її контрольні елементи. Позначити всі обов'язкові та необов'язкові поля, формати даних та додати іншу доречну інформацію. При використанні атрибута min слід пересвідчитись, що вимога щодо мінімального значення – зрозуміла користувачу. Додати інструкції всередині <label> може бути достатньо. Якщо інструкції надаються поза підписами, що дозволяє більш гнучкі розташування та дизайн, слід розглянути використання aria-labelledby або aria-describedby.

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

Сумісність із браузерами

Дивіться також

• max
• min
• Валідація обмежень
• Валідація форм
• validityState.stepMismatch
• :out-of-range
• <input>
• Типи date, month, week, time, datetime-local, number і range, а також <meter>