Практика: числовое поле с единицей измерения
Единица измерения должна быть понятна и рядом с полем, и в его доступном имени. Упражнение разделяет ввод числа и декоративное повторение единицы, не заставляя вводить суффикс вручную.
Назначение
Единица измерения должна быть понятна и рядом с полем, и в его доступном имени. Упражнение разделяет ввод числа и декоративное повторение единицы, не заставляя вводить суффикс вручную.
Как это работает
Назовите единицу словами в label. Визуальный суффикс можно скрыть от вспомогательных технологий через aria-hidden, если он полностью повторяет уже указанное. Ограничения min и step задают допустимые значения, но не заменяют проверку приложения.
Пример
<style>.unit-field{display:flex;align-items:center;gap:.5rem}.unit-field input{width:8ch;font:inherit;padding:.5rem}</style>
<label for="lesson-time">Продолжительность, минуты</label><div class="unit-field"><input id="lesson-time" name="minutes" type="number" min="1" step="1" value="15"><span aria-hidden="true">мин</span></div>Что должно получиться
В поле находится только число 15, а единица видна рядом и включена в подпись. Нажатие на label переводит фокус в соответствующее поле.
Граница применения и частая ошибка
Не используйте number для кодов, телефонов и идентификаторов: они не являются величинами для арифметики. Не рассчитывайте на одинаковый вид стрелок во всех браузерах. Пустое поле допустимо, пока явно не добавлен required.
Самостоятельная проверка
Проверьте ноль, дробь и пустое значение, затем добавьте required и сравните состояние. Увеличьте масштаб и убедитесь, что суффикс не накладывается на число. Для формы заранее определите серверную единицу хранения.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Проверки печати, загрузки файлов и сетевых ответов выполняйте в отдельном учебном проекте.