- Input type number
- Шаг изменения
- Пример:
- Минимальное значение
- Пример:
- Максимальное значение
- Пример:
- Опции по умолчанию
- Пример:
- Валидация
- Пример:
- HTML attribute: min
- Syntax
- Impact on step
- Accessibility concerns
- Specifications
- Browser compatibility
- html.elements.input.min
- html.elements.meter.min
- See also
- Found a content problem with this page?
- MDN
- Support
- Our communities
- Developers
- Атрибут min
- Синтаксис
- Значения
- Значение по умолчанию
- Типы тегов
- Ввод чисел
Input type number
В HTML5 появилось специальное поле с атрибутом type=»number» для вода чисел. Рассмотрим его возможности.
Для поля доступны следующие атрибуты:
Атрибут | Описание |
---|---|
step | Шаг изменения значения |
max | Максимальное значение |
min | Минимальное значение |
placeholder | Подсказка |
readonly | Только для чтения |
disabled | Заблокирован |
list | Связка со списком опций datalist по id |
required | Обязательный для заполнения |
Шаг изменения
Атрибут step=»1″ задает на сколько будет увеличиваться или уменьшаться значение в поле. Может быть как целым (10) так и дробным (0.1).
Пример:
Минимальное значение
Атрибут min=»1″ задает минимально возможное значение value . Это значение должно быть меньше или равно значению max . Может быть целым, отрицательным или дробным.
Пример:
Максимальное значение
Атрибут max=»100″ задает максимально возможное значение value .
Пример:
Опции по умолчанию
У поля есть возможность задать список с рекомендуемыми значениями с помощью элемента .
Пример:
Валидация
Если указать атрибут required , то при отправки формы будет проверятся заполнено поле или нет, а также превышение введенного значения value в атрибутах min и max .
Проверить значение регулярным выражением с помощью атрибута pattern не получится, т.к. он не поддерживается.
Пример:
Также доступны CSS псевдо свойства :invalid и :valid , с помощью них можно применить стили к неправильно заполненному полю.
input[type="number"]:invalid+span:after < content: '✖'; padding-left: 5px; color: red; >input[type="number"]:valid+span:after
HTML attribute: min
The min attribute defines the minimum value that is acceptable and valid for the input containing the attribute. If the value of the element is less than this, the element fails validation. This value must be less than or equal to the value of the max attribute.
Some input types have a default minimum. If the input has no default minimum and a value is specified for min that can’t be converted to a valid number (or no minimum value is set), the input has no minimum value.
It is valid for the input types including: date, month, week, time, datetime-local, number and range types, and the element.
Syntax
Input type | Syntax | Example |
---|---|---|
date | yyyy-mm-dd | |
month | yyyy-mm | |
week | yyyy-W## | |
time | hh:mm | |
datetime-local | yyyy-mm-ddThh:mm | |
number | ||
range |
Note: When the data entered by the user doesn’t adhere to the min value set, the value is considered invalid in constraint validation and will match the :invalid and :out-of-range pseudo-classes.
Input type | Syntax | Example |
---|---|---|
|
Impact on step
The value of min and step define what are valid values, even if the step attribute is not included, as step defaults to 0 .
We add a big red border around invalid inputs:
input:invalid border: solid red 3px; >
Then define an input with a minimum value of 7.2, omitting the step attribute, wherein it defaults to 1.
input id="myNumber" name="myNumber" type="number" min="7.2" value="8" />
Because step defaults to 1, valid values include 7.2 , 8.2 , 9.2 , and so on. The value 8 is not valid. As we included an invalid value, supporting browsers will show the value as invalid.
If not explicitly included, step defaults to 1 for number and range , and 1 unit type (second, week, month, day) for the date/time input types.
Accessibility concerns
Provide instructions to help users understand how to complete the form and use individual form controls. Indicate any required and optional input, data formats, and other relevant information. When using the min attribute, ensure this minimum requirement is understood by the user. Providing instructions within the may be sufficient. If providing instructions outside of labels, which allows more flexible positioning and design, consider using aria-labelledby or aria-describedby .
Specifications
Browser compatibility
html.elements.input.min
BCD tables only load in the browser
html.elements.meter.min
BCD tables only load in the browser
See also
- step
- max
- other meter attributes: low , high , optimum
- Constraint validation
- Form validation
- validityState.rangeUnderflow
- :out-of-range
- date, month, week, time, datetime-local, number and range types, and the
Found a content problem with this page?
This page was last modified on Feb 24, 2023 by MDN contributors.
Your blueprint for a better internet.
MDN
Support
Our communities
Developers
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.
Атрибут min
Устанавливает нижнее значение для ввода числа или даты в поле формы.
Синтаксис
Значения
Целое положительное или отрицательное число (для type = «number» , type = «range» ).
Дата в формате ГГГГ-ММ-ДД (например: 2012-12-22) для type = «date» .
Значение по умолчанию
Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.
Типы тегов
HTML5
Блочные элементы
Строчные элементы
Универсальные элементы
Нестандартные теги
Осуждаемые теги
Видео
Документ
Звук
Изображения
Объекты
Скрипты
Списки
Ссылки
Таблицы
Текст
Форматирование
Формы
Фреймы
Ввод чисел
Для ввода чисел предназначено специальное поле, которое допускает ограничения по нижней и верхней границе, а также устанавливает шаг приращения. Само поле для ввода чисел похоже на обычное текстовое поле, но со стрелками, которые позволяют увеличивать и уменьшать значение (рис. 1).
Рис. 1. Вид поля для ввода чисел
Синтаксис создания поля следующий:
Допустимые атрибуты перечислены в табл. 1.
Атрибут | Описание |
---|---|
min | Минимальное значение. |
max | Максимальное значение. |
size | Ширина поля. |
step | Шаг приращения числа. Может быть как целым (2), так и дробным (0.2). |
name | Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать. |
value | Начальное число, которое выводится в поле. |
Для ограничения введённого числа предназначены атрибуты min и max , они могут принимать отрицательное и положительное значение. При достижении верхнего или нижнего порога стрелки в поле в зависимости от браузера блокируются или не дают никакого эффекта (пример 1). Несмотря на такие запреты, в любом случае в поле самостоятельно можно вводить любые значения, включая текст. Атрибуты min и max работают только при использовании стрелок в поле.
Пример 1. Ограничение ввода чисел
Введите число от 1 до 10:
Если значение min превышает max , то атрибут min игнорируется.
Атрибут step задаёт шаг приращения и по умолчанию равен 1. В то же время значение может быть и дробным числом, как показано в примере 2.
Укажите нормальную среднюю температуру человека:
Результат примера продемонстрирован на рис. 2.
Рис. 2. Ввод дробных чисел в поле
Браузеры плохо поддерживают это поле, пока лишь это делает Chrome и Opera. В остальных браузерах поле для ввода числа приобретает вид обычного текстового поля.