Для чего используется поле 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
Поле для ввода чисел:
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.
Чётные положительные целые числа
Нечётные положительные целые числа
Значение 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
Браузер может предоставить ступенчатые стрелки, чтобы пользователь мог увеличивать и уменьшать значение с помощью мыши или касания кончиком пальца.
Try it
В браузерах, которые не поддерживают ввод типа number , ввод number возвращается к типу text .
Value
Число, представляющее значение числа, введенного во входные данные. Вы можете установить значение по умолчанию для ввода, включив число в атрибут value , например:
input id="number" type="number" value="42" />
Additional attributes
В дополнение к атрибутам, обычно поддерживаемым всеми типами , входы типа number поддерживают эти атрибуты.
list
Значения атрибута списка — это id элемента , расположенного в том же документе. предоставляет список предопределенных значений, которые можно предложить пользователю для этого входа. Любые значения в списке, несовместимые с type , не включены в предлагаемые параметры. Предоставленные значения являются рекомендациями, а не требованиями: пользователи могут выбрать из этого предопределенного списка или указать другое значение.
max
Максимальное значение, которое можно принять для этого входа. Если значение value , введенное в элемент, превышает это значение, элемент выходит из строя constraint validation . Если значение атрибута max не является числом, то элемент не имеет максимального значения.
Это значение должно быть больше или равно значению атрибута min .
min
Минимальное значение для этого входа. Если value элемента меньше этого значения, элемент выходит из строя constraint validation . Если для min указано недопустимое значение, входные данные не имеют минимального значения.
Это значение должно быть меньше или равно значению атрибута max .
placeholder
Атрибут placeholder — это строка, предоставляющая пользователю краткую подсказку о том, какая информация ожидается в поле. Это должно быть слово или короткая фраза, демонстрирующая ожидаемый тип данных, а не поясняющее сообщение. Текст не должен включать возврат каретки или перевод строки.
Если содержимое элемента управления имеет одну направленность ( LTR или RTL ), но необходимо представить заполнитель в противоположном направлении, вы можете использовать символы форматирования двунаправленного алгоритма Unicode, чтобы переопределить направленность внутри заполнителя; см. How to use Unicode controls for bidi text для получения дополнительной информации.
Примечание. По возможности избегайте использования атрибута placeholder . Это не так полезно с семантической точки зрения, как другие способы объяснения вашего form, и может вызвать неожиданные технические проблемы с вашим контентом. См. labels для получения дополнительной информации.
readonly
Атрибут Boolean, который, если он присутствует, означает, что это поле не может быть отредактировано пользователем. Однако его value по-прежнему можно изменить с помощью кода JavaScript, непосредственно устанавливающего свойство HTMLInputElement value .
Примечание. Поскольку поле только для чтения не может иметь значение, required не оказывает никакого влияния на входные данные с также указанным атрибутом readonly .
step
Атрибут step — это число, указывающее уровень детализации, которому должно соответствовать значение, или специальное значение any , которое описано ниже. Действительны только значения, которые равны основанию для степпинга ( min , если указано, value в противном случае, и соответствующее значение по умолчанию, если ни одно из них не указано).
Строковое значение any означает, что степпинг не подразумевается и разрешено любое значение (за исключением других ограничений, таких как min и max ).
Примечание. Если данные, введенные пользователем, не соответствуют ступенчатой конфигурации, user agent может округлить до ближайшего допустимого значения, предпочитая числа в положительном направлении, когда есть два одинаково близких варианта.
Значение шага по умолчанию для входов number — 1 , что позволяет вводить только целые числа, если только основание шага не является целым числом.
Использование ввода чисел
Тип ввода number следует использовать только для возрастающих чисел, особенно когда увеличение и уменьшение числа с помощью вращающейся кнопки полезно для пользователя. Тип ввода number не подходит для значений, которые состоят только из чисел, но, строго говоря, не являются числами, например почтовые индексы во многих странах или номера кредитных карт. Для нечисловых входных данных рассмотрите возможность использования другого типа ввода, например или другого типа с атрибутом inputmode :
input type="text" inputmode="numeric" pattern="\d*" />
Элементы могут упростить вашу работу при построении пользовательского интерфейса и логики ввода чисел в form. Когда вы создаете числовой ввод с правильным значением type , number , вы получаете автоматическую проверку того, что введенный текст является числом, и обычно набор кнопок вверх и вниз для увеличения и уменьшения значения.
Предупреждение. По логике, вы не должны иметь возможности вводить символы внутри числового ввода, кроме цифр. Некоторые браузеры допускают недопустимые символы, другие — нет; см. Firefox bug 1398528 .
Примечание. Пользователь может возиться с вашим HTML за кулисами, поэтому ваш сайт не должен использовать простую проверку на стороне клиента в целях безопасности. Вы должны проверить на стороне сервера любую транзакцию, в которой предоставленное значение может иметь какие-либо последствия для безопасности.
Мобильные браузеры дополнительно помогают пользователю, показывая специальную клавиатуру, более подходящую для ввода чисел, когда пользователь пытается ввести значение.
Простой ввод числа
В его самом простом form ввод числа может быть реализован следующим образом:
id="ticketNum" type="number" name="ticketNum" value="0" />
Ввод числа считается действительным, когда он пуст и когда введено одно число, но в противном случае он недействителен. Если используется атрибут required , ввод больше не считается действительным, если он пуст.
Примечание. Любое число является допустимым значением, если это valid floating point number (то есть не NaN или Infinity ).
Placeholders
Здесь у нас есть ввод number с заполнителем « Multiple of 10 ». Обратите внимание, как заполнитель исчезает и появляется снова, когда вы манипулируете содержимым поля редактирования.
input type="number" placeholder="Multiple of 10" />
Контроль размера шага
По умолчанию кнопки вверх и вниз, предназначенные для увеличения и уменьшения числа, увеличивают и уменьшают значение на 1. Вы можете изменить это, указав атрибут step , который принимает в качестве значения число, указывающее величину шага. Наш приведенный выше пример содержит заполнитель, говорящий, что значение должно быть кратно 10, поэтому имеет смысл добавить значение step для 10 :
input type="number" placeholder="multiple of 10" step="10" />
В этом примере вы должны обнаружить, что стрелки шага вверх и вниз будут каждый раз увеличивать и уменьшать значение на 10, а не на 1. Вы все равно можете вручную ввести число, которое не кратно 10, но оно будет считаться недействительным.
Указание минимального и максимального значений
Вы можете использовать атрибуты min и max , чтобы указать минимальное и максимальное значение, которое может иметь поле. Например, давайте дадим нашему примеру минимум 0 и максимум 100 :
input type="number" placeholder="multiple of 10" step="10" min="0" max="100" />
В этой обновленной версии вы должны обнаружить, что кнопки шага вверх и вниз не позволят вам go ниже 0 или выше 100. Вы все еще можете вручную ввести число вне этих границ, но оно будет считаться недействительным.
Разрешение десятичных значений
Одна проблема с числовыми входами заключается в том, что размер их шага по умолчанию равен 1. Если вы попытаетесь ввести десятичное число (например, «1.0»),), оно будет считаться недействительным. Если вы хотите ввести значение, требующее десятичных знаков, вам нужно отразить это в значении step (e.g. step=»0.01″ , чтобы разрешить десятичные числа до двух десятичных знаков. places). Вот простой пример:
input type="number" placeholder="1.0" step="0.01" min="0" max="10" />
Обратите внимание, что в этом примере допустимо любое значение от 0.0 до 10.0 с десятичными знаками до двух знаков. Например, «9.52» допустим, а «9.521» — нет.
Управление размером ввода
Элементы типа number не поддерживают атрибуты размеров form, такие как size . Вам придется прибегнуть к CSS , чтобы изменить размер этих элементов управления.
Например, чтобы настроить ширину ввода так, чтобы она была настолько широкой, насколько это необходимо для ввода трехзначного числа, мы можем изменить наш HTML, включив в него id , и сократить наш заполнитель, поскольку поле будет слишком узким для текста, который мы использовали до сих пор:
input type="number" placeholder="x10" step="10" min="0" max="100" id="number" />
Затем мы добавляем немного CSS, чтобы сузить ширину элемента с помощью селектора id #number :
#number < width: 3em; >
Результат выглядит следующим образом:
Предлагаемые значения
Вы можете предоставить список параметров по умолчанию, из которых пользователь может выбирать, указав атрибут list , который содержит в качестве значения id из , который, в свою очередь, содержит один элемент для каждого предлагаемого значения. value каждого option является соответствующим предлагаемым значением для поля ввода номера.
input id="ticketNum" type="number" name="ticketNum" list="defaultNumbers" /> span class="validity"> span> datalist id="defaultNumbers"> option value="10045678"> option> option value="103421"> option> option value="11111111"> option> option value="12345678"> option> option value="12999922"> option> datalist>
Validation
Мы уже упоминали ряд функций проверки входов number , но давайте рассмотрим их сейчас:
- Элементы автоматически делают недействительной любую запись, которая не является числом (или пуста, если только required не является specified).).
- Вы можете использовать атрибут required , чтобы сделать пустую запись недействительной. (In другими словами ввод должен быть заполнен in.)
- Вы можете использовать атрибут step , чтобы ограничить допустимые значения определенным набором шагов (e.g. кратных 10)..
- Вы можете использовать атрибуты min и max , чтобы ограничить допустимые значения нижними и верхними границами.
В следующем примере демонстрируются все вышеперечисленные функции, а также используется CSS для отображения допустимых и недопустимых значков в зависимости от значения input :
form> div> label for="balloons">Number of balloons to order (multiples of 10): label> input id="balloons" type="number" name="balloons" step="10" min="0" max="100" required /> span class="validity"> span> div> div> input type="submit" /> div> form>
Попробуйте отправить form с другими введенными недопустимыми значениями — например, без значения; значение ниже 0 или выше 100; значение, не кратное 10; или нечисловое значение — и посмотрите, как отличаются сообщения об ошибках, которые выдает вам браузер.
CSS, примененный к этому примеру, выглядит следующим образом:
div < margin-bottom: 10px; > input:invalid + span::after < content: "✖"; padding-left: 5px; > input:valid + span::after < content: "✓"; padding-left: 5px; >
Здесь мы используем псевдоклассы :invalid и :valid для отображения соответствующего недопустимого или допустимого значка в качестве сгенерированного содержимого на соседнем элементе в качестве визуального индикатора достоверности.
Мы поместили его на отдельный элемент для дополнительной гибкости. Некоторые браузеры не очень эффективно отображают сгенерированный контент на некоторых типах входных данных form. (Read, например раздел на К14153К.)
Предупреждение: проверка HTML form не заменяет сценарии на стороне сервера, которые обеспечивают правильность формата введенных данных!
Для кого-то слишком легко внести коррективы в HTML, которые позволят им обойти проверку или полностью удалить ее. Также возможно, что кто-то обойдет ваш HTML и отправит данные непосредственно на ваш сервер.
Если ваш код на стороне сервера не может проверить данные, которые он получает, может произойти сбой при отправке данных в неправильном формате (или данных, которые слишком велики, имеют неправильный тип и т. д. forth).).
Pattern validation
Элементы не поддерживают использование атрибута pattern для приведения введенных значений в соответствие с определенным шаблоном регулярного выражения.
Обоснование этого заключается в том, что числовые входы не будут действительными, если они содержат что-либо, кроме чисел, и вы можете ограничить минимальное и максимальное количество допустимых цифр с помощью атрибутов min и max (как объяснено above).).
Examples
Мы уже рассмотрели тот факт, что по умолчанию приращение равно 1 , и вы можете использовать атрибут step , чтобы разрешить ввод десятичных чисел. Давайте посмотрим поближе.
В следующем примере показан form для ввода роста пользователя. По умолчанию высота принимается в метрах, но вы можете нажать соответствующую кнопку, чтобы вместо этого form принимал футы и дюймы. Ввод для высоты в метрах принимает десятичные знаки до двух знаков.
HTML выглядит так:
form> div class="metersInputGroup"> label for="meters">Enter your height — meters: label> input id="meters" type="number" name="meters" step="0.01" min="0" placeholder="e.g. 1.78" required /> span class="validity"> span> div> div class="feetInputGroup" style="display: none;"> span>Enter your height — span> label for="feet">feet: label> input id="feet" type="number" name="feet" min="0" step="1" /> span class="validity"> span> label for="inches">inches: label> input id="inches" type="number" name="inches" min="0" max="11" step="1" /> span class="validity"> span> div> div> input type="button" class="meters" value="Enter height in feet and inches" /> div> div> input type="submit" value="Submit form" /> div> form>
Вы увидите, что мы используем многие из атрибутов, которые мы уже рассматривали в статье ранее. Поскольку мы хотим принять значение метра в сантиметрах, мы установили значение step в 0.01 , чтобы такие значения, как 1.78, не считались недействительными. Мы также предоставили заполнитель для этого ввода.
Мы скрыли входные данные для футов и дюймов изначально, используя style=»display: none;» , так что метры являются типом ввода по умолчанию.
Теперь перейдем к CSS.. Это очень похоже на стиль проверки, который мы видели раньше; здесь ничего примечательного.
div < margin-bottom: 10px; position: relative; > input[type="number"] < width: 100px; > input + span < padding-right: 30px; > input:invalid + span::after < position: absolute; content: "✖"; padding-left: 5px; > input:valid + span::after < position: absolute; content: "✓"; padding-left: 5px; >
И, наконец, JavaScript:.
const metersInputGroup = document.querySelector('.metersInputGroup'); const feetInputGroup = document.querySelector('.feetInputGroup'); const metersInput = document.querySelector('#meters'); const feetInput = document.querySelector('#feet'); const inchesInput = document.querySelector('#inches'); const switchBtn = document.querySelector('input[type="button"]'); switchBtn.addEventListener('click', () => < if (switchBtn.getAttribute('class') === 'meters') < switchBtn.setAttribute('class', 'feet'); switchBtn.value = 'Enter height in meters'; metersInputGroup.style.display = 'none'; feetInputGroup.style.display = 'block'; feetInput.setAttribute('required', ''); inchesInput.setAttribute('required', ''); metersInput.removeAttribute('required'); metersInput.value = ''; > else < switchBtn.setAttribute('class', 'meters'); switchBtn.value = 'Enter height in feet and inches'; metersInputGroup.style.display = 'block'; feetInputGroup.style.display = 'none'; feetInput.removeAttribute('required'); inchesInput.removeAttribute('required'); metersInput.setAttribute('required', ''); feetInput.value = ''; inchesInput.value = ''; > >);
После объявления нескольких переменных в button добавляется прослушиватель событий для управления механизмом переключения. Это довольно просто, в основном включает переключение class и кнопки и обновление отображаемых значений двух наборов входов при нажатии кнопки.
(Note, что здесь мы не конвертируем между счетчиками и feet/inches, что, вероятно, было бы в реальном веб-приложении do.)
Примечание. Когда пользователь нажимает кнопку, required attribute(s) удаляется из input(s), который мы скрываем, и очищается value attribute(s). Это сделано для того, чтобы form мог быть отправлен, если оба входных набора не заполнены. Это также гарантирует, что form не отправит данные, которые пользователь не хотел.
Если бы вы этого не сделали, вам пришлось бы заполнить как feet/inches, так и счетчики, чтобы отправить form!
Accessibility
Неявный role для элемента равен spinbutton . Если кнопка прокрутки не является важной функцией для вашего элемента управления form, подумайте о том, чтобы не использовать type=»number» . Вместо этого используйте inputmode=»numeric» вместе с атрибутом pattern , который ограничивает символы числами и связанными с ними символами. При использовании существует риск того, что пользователи случайно увеличат число, пытаясь сделать что-то еще. Кроме того, если пользователи пытаются ввести что-то, что не является числом, не будет явной обратной связи о том, что они делают неправильно.
Также рассмотрите возможность использования атрибута autocomplete , чтобы помочь пользователям быстрее заполнять формы и с меньшей вероятностью ошибок. Например, чтобы включить автозаполнение поля почтового индекса, установите autocomplete=»postal-code» .