< input > элементы типа number используются, чтобы позволить пользователю ввести число. Они включают встроенную проверку для отклонения нечисловых записей.

Браузер может предоставить ступенчатые стрелки, чтобы пользователь мог увеличивать и уменьшать значение с помощью мыши или клавиши вверх/вниз.

Число, представляющее значение числа, введенного во входные данные. Вы можете установить значение по умолчанию для ввода, включив число внутри value атрибута, например:

Ввод числа считается действительным, когда он пуст и когда введено одно число, но в противном случае он недействителен. Если required атрибут используется, ввод больше не считается действительным, если он пуст.

Иногда полезно предложить контекстную подсказку о том, какую форму должны принимать входные данные. Это может быть особенно важно, если дизайн страницы не предлагает описательных меток для каждого файла < input > . Здесь на помощь приходят заполнители. Заполнитель — это значение, которое чаще всего используется для предоставления подсказки относительно формата ввода value . Он отображается внутри поля редактирования, когда элемент value имеет значение "". После ввода данных в поле заполнитель исчезает; если поле пусто, местозаполнитель появляется снова.

Здесь у нас есть number ввод с заполнителем " Multiple of 10". Обратите внимание, как заполнитель исчезает и появляется снова, когда вы манипулируете содержимым поля редактирования.

По умолчанию кнопки вверх и вниз, предназначенные для увеличения и уменьшения числа, увеличивают и уменьшают значение на 1. Вы можете изменить это, предоставив step атрибут, который принимает в качестве значения число, указывающее величину шага. В приведенном выше примере содержится заполнитель, указывающий, что значение должно быть кратно 10, поэтому имеет смысл добавить step значение 10:

В этом примере вы должны обнаружить, что стрелки шага вверх и вниз будут каждый раз увеличивать и уменьшать значение на 10, а не на 1. Вы по-прежнему можете вручную ввести число, которое не кратно 10, но оно будет считаться недействительным.

Вы можете использовать атрибуты min и max для указания минимального и максимального значения, которое может иметь поле. Например, давайте дадим нашему примеру минимум 0, а максимум 100:

В этой обновленной версии вы должны обнаружить, что кнопки шага вверх и вниз не позволят вам опуститься ниже 0 или выше 100. Вы все еще можете вручную ввести число вне этих границ, но оно будет считаться недействительным.

Одна проблема с числовым вводом заключается в том, что размер их шага по умолчанию равен 1. Если вы попытаетесь ввести число с десятичным знаком (например, «1.0»), оно будет считаться недействительным. Если вы хотите ввести значение, требующее десятичных знаков, вам нужно будет отразить это в step значении (например, step="0.01", разрешить десятичные знаки до двух знаков после запятой). Вот простой пример:

Обратите внимание, что этот пример допускает любое значение между 0.0и 10.0с десятичными знаками до двух знаков. Например, «9,52» допустимо, а «9,521» — нет.

< input > элементы типа number не поддерживают атрибуты размера формы, такие как size . Вам придется прибегнуть к CSS , чтобы изменить размер этих элементов управления.

Например, чтобы отрегулировать ширину ввода так, чтобы она была такой ширины, которая необходима для ввода трехзначного числа, мы можем изменить наш HTML-код, включив в него id и укоротив наш заполнитель, поскольку поле будет слишком узким для текста, который мы использовал до сих пор:

Вы можете предоставить список параметров по умолчанию, из которых пользователь может выбирать, указав list атрибут, который содержит в качестве значения id a < datalist > , который, в свою очередь, содержит один < option > элемент для каждого предлагаемого значения. Каждый option value является соответствующим предлагаемым значением для поля ввода числа.

Мы уже упоминали ряд функций проверки number входных данных, но давайте рассмотрим их сейчас:

элементы автоматически делают недействительной любую запись, которая не является числом (или пуста, если required не указано иное).

Вы можете использовать required атрибут, чтобы сделать пустую запись недействительной. (Другими словами, ввод должен быть заполнен.)

Вы можете использовать step атрибут, чтобы ограничить допустимые значения определенным набором шагов (например, кратным 10).

Вы можете использовать атрибуты min и max для ограничения допустимых значений нижними и верхними границами.