Значение number
Синтаксис
<input type="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" - Глобальные атрибуты
- accesskey, class, contenteditable, data-*, dir, draggable, dropzone, id, inert, lang, spellcheck, style, tabindex, title, translate, xml:lang
Пример использования
<html>
<head>
<meta charset="utf-8">
<title>Значение number (input-type)</title>
</head>
<body>
<h1>Пример с числовым полем "type=number"</h1>
<fieldset> <legend>Введите ваше любимое число</legend>
<p><input type="number" min="0" placeholder="Любимое число" list="numbList"></p>
<datalist id="numbList">
<option value="3" label="Три">
<option value="7" label="Семь">
<option value="13" label="Тринадцать">
</datalist>
</fieldset>
</body>
</html>