Поле для ввода чисел:
name имя ключа параметра value значение ключа параметра, которое может содержать: цифры «0-9», один плюс «+» или минус «-», один символ «e» или «E», одну точку «.». Можно ввести буквы, но форма не будет отправлена при нажатии на кнопку submit , а покажет сообщение об ошибке. Чаще всего не задаётся. Пользователь может его изменить, если не указаны атрибуты readonly и disabled . readonly заблокировано изменение пользователем disabled заблокированы доступ, изменение пользователем и передача данных текущего параметра required поле не может быть пустым step
step=20
step=any шаг изменения, который может быть положительным целым или дробным числом. Значение value кратно значению step , то есть делится на него без остатка. Пример разрешённых значений value при step=»20″ : …, -40, -20, 0, 20, 40, …. По умолчанию равен 1 . То есть покажет ошибку, если ввести десятичную дробь. Для того, чтобы убрать ограничения, нужно присвоить any . min минимально возможное значение value , необходимое для отправки формы max максимально возможное значение value , необходимое для отправки формы placeholder подсказка-заглушка title всплывающая подсказка при наведении курсора мышки autocomplete автозаполнение. Можно его отключить или сделать более конкретизированным. list список рекомендованных значений autofocus фокус поля (то есть период между щелчком по элементу и щелчком вне элемента) получен при загрузке документа
Поле не подходит для текстовых строк, состоящих из 16 и более цифр, например, номера пластиковой карты, так как длинные числа от 9007199254740991 могут округляться.
Количество товара
- увеличение и уменьшение значения числового поля с помощью кнопок пошагового изменения,
- сообщение об ошибки при вводе букв и дробных чисел,
- минимальное значение 1.
Чётные положительные целые числа
Нечётные положительные целые числа
HTML5 input type=number и десятичные дроби
Как вы уже, возможно, знаете с HTML 5 появился новый тип поля ввода – number, который служит для ввода чисел.
Однако если просто написать:
то при отправке чисел с плавающей запятой/точкой, форма не отправляется и появляется информация о ошибке, где просят ввести ближайшее целое число.
Это происходит из за того что для полей ввода с типом number применяется еще атрибут step, который указывает с каким каким шагом должны идти числа.
Атрибут step
Атрибут step указывает c каким шагом допустимо изменение числа. Если он не задан явно, то применяется значение по умолчанию равное 1.
Примеры
При step=1 допустимы числа:
1, 2, 3, 4, 5, 6 и т.д.
При step=5 допустимы числа:
5, 10, 15, 20, 25, 30 и т.д.
При step=0.3 допустимы числа:
0.3, 0.6, 0.9, 1.2, 1,5 и т.д.
Для того чтоб убрать ограничения которые накладывает атрибут step и вводить любые числа необходимо использовать step=»any». Выглядеть код поля ввода будет примерно так
Независимо от того вводите вы число с плавающей точкой или плавающей запятой, на сервер будет отправляться число с плавающей точкой.
Значение number
Тип number (от англ. «number» ‒ «число») создаёт однострочное поле ввода числового значения.
Внешний вид
‒ числовое поле;
‒ наведение курсора;
‒ фокус.
Примечание
Данное поле подойдет не для всех случаев, когда планируется ввод какого-либо числа в поле. Простым способом определения необходимости использования числового поля является рассмотрение вопроса о том, имело бы смысл для данного поля иметь интерфейс со счётчиком (например, со стрелками «вверх» и «вниз»). Так например, использовать данное поле для ввода номера банковской карты было бы не совсем уместно (для этого лучше использовать обычное текстовое поле).
Поддержка браузерами
Спецификация
| Верс. | Раздел |
|---|---|
| HTML | |
| 2.0 | |
| 3.2 | |
| 4.01 | |
| 5.0 | 4.10.5.1.9 Number state (type=number) |
| 5.1 | 4.10.5.1.12. Number state (type=number) |
| XHTML | |
| 1.0 | |
| 1.1 | |
Сопутствующие атрибуты
autocomplete Автозаполнение значения числового поля. autofocus Автоматческая фокусировка на числовом поле после полной загрузки страницы. disabled Блокировка числового поля.
disabled=»disabled»
form Присоединение числового поля к форме. list Создание списка рекомендованных вариантов чисел.
max Указывает, верхний (максимальный) предел вводимого числа.
min=»0″ max=»10″
min Указывает, нижний (минимальный) предел вводимого числа.
min=»0″ max=»10″
name Присваивает имя числовому полю. placeholder Указывает текст-подсказку для пустого поля.
placeholder=»Текст-подсказка»
readonly Указывает, что числовое поле доступно только для чтения (изменение/редактирование запрещено). required Указывает, что числовое поле обязательно для заполнения. step Устанавливает интервал увеличения значения числового поля. value Указывает значение числового поля, отправляемое на сервер или используемое скриптами.
Примечание: Данный атрибут должен иметь значение, являющееся допустимым числом с плавающей точкой.
value=»1234567890″
Для чего используется поле input type number
Для ввода чисел используется элемент input с атрибутом type=»number» . Он создает числовое поле, которое мы можем настроить с помощью следующих атрибутов:
- min : минимально допустимое значение
- max : максимально допустимое значение
- readonly : доступно только для чтения
- required : указывает, что данное поле обязательно должно иметь значение
- step : значение, на которое будет увеличиваться число в поле
- value : значение по умолчанию
Используем числовое поле:
Числовое поле в HTML5
Здесь числовое поле по умолчанию имеет значение 10 ( value=»10″ ), минимально допустимое значение, которое мы можем ввести, — 1, а максимальное допустимое значение — 100. И атрибут step=»1″ устанавливает, что значение будет увеличиваться на единицу.
В зависимости от браузера визуализация этого поля может отличаться:
Но как правило, у большинства современных браузеров, кроме IE 11 и Microsoft Edge, справа в поле ввода имеются стрелки для увеличения/уменьшения значения на величину, указанную в атрибуте step.
Как и в случае с текстовым полем мы можем здесь прикрепить список datalist с диапазоном возможных значений:
Числовое поле в HTML5
Ползунок
Ползунок представляет шкалу, на которой мы можем выбрать одно из значений. Для создания ползунка применяется элемент input с атрибутом type=»range» . Во многом ползунок похож на простое поле для ввода чисел. Он также имеет атрибуты min , max , step и value :
Ползунок в HTML5