<input type="number">

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

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

В браузерах, которые не поддерживают ввод типа number, элемент ввода number по умолчанию использует тип text.

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

<input id="number" type="number" value="42" />

В дополнение к атрибутам, поддерживаемым всеми типами <input>, вводы типа number поддерживают следующие атрибуты.

Значение атрибута list — это id элемента <datalist>, расположенного в том же документе. Элемент <datalist> предоставляет список предопределённых значений для предложений пользователю для этого элемента ввода. Любые значения в списке, несовместимые с типом type, не включаются в предлагаемые варианты. Предлагаемые значения являются рекомендациями, а не требованиями: пользователи могут выбрать из этого предопределённого списка или ввести другое значение.

Максимальное значение, принимаемое для этого элемента ввода. Если значение value, введённое в элемент, превышает это значение, элемент не проходит валидацию ограничений. Если значение атрибута max не является числом, у элемента нет максимального значения.

Это значение должно быть больше или равно значению атрибута min.

Минимальное значение, принимаемое для этого элемента ввода. Если значение value элемента меньше этого значения, элемент не проходит валидацию ограничений. Если заданное значение для min не является допустимым числом, у элемента нет минимального значения.

Это значение должно быть меньше или равно значению атрибута max.

Атрибут placeholder — это строка, которая даёт краткое представление пользователю о том, какой вид информации требуется в поле. Это должно быть слово или короткая фраза, демонстрирующая ожидаемый тип данных, а не пояснительное сообщение. Текст не должен содержать возвратов каретки или символов перевода строки.

Если содержимое элемента имеет одно направлениельности (LTR или RTL), но необходимо отобразить подчёркивание в противоположном направлении, можно использовать символы форматирования Unicode для переопределения направления в подчёркивании. Дополнительную информацию см. на странице Как использовать Unicode-управляющие символы для двунаправленного текста.

Логический атрибут, который, если присутствует, означает, что это поле не может быть изменено пользователем. Однако его value всё ещё может быть изменено кодом JavaScript путём прямого задания свойства HTMLInputElement value.

Атрибут step — число, которое определяет точность, которой должно соответствовать значение, или специальное значение any, которое описано ниже. Только значения, равные основанию шага (значение min, если указано, value в противном случае и соответствующее значение по умолчанию, если ни одно из них не задано), являются допустимыми.

Строковое значение any означает, что шаги не подразумеваются, и любое значение разрешено (за исключением других ограничений, таких как min и max).

Значение шага по умолчанию для элементов ввода number составляет 1, что позволяет вводить только целые числа — *за исключением* случаев, когда основание шага не является целым числом.

Тип ввода number следует использовать только для целочисленных значений, особенно когда шаги при увеличении и уменьшении спин-кнопок полезны для пользовательского опыта. Тип ввода number не подходит для значений, которые состоят только из чисел, но не являются строго числовыми, таких как почтовые индексы во многих странах или номера кредитных карт. Для нечисловых значений рассмотрите использование другого типа ввода, такого как <input type="tel"> или другого типа <input> с атрибутом inputmode:

<input type="text" inputmode="numeric" pattern="\d*" />

Элементы ввода типа <input type="number"> могут помочь упростить вашу работу при создании пользовательского интерфейса и логики для ввода чисел в форму. Когда вы создаёте элемент ввода типа number с правильным значением type = number, вы получаете автоматическую валидацию введённого текста как числа и обычно набор кнопок увеличения и уменьшения для изменения значения.

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

В самом простом виде элемент ввода типа number может быть реализован следующим образом:

<label for="ticketNum">Number of tickets you would like to buy:</label>
<input id="ticketNum" type="number" name="ticketNum" value="0" />

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

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

Здесь у нас есть элемент ввода типа 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" />

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

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

<input type="number" placeholder="1.0" step="0.01" min="0" max="10" />

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

Если вы хотите разрешить произвольные десятичные значения, вы можете установить значение step на "any".

<input> элементы типа number не поддерживают атрибуты форматирования размера, такие как 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 элемента <datalist>, который в свою очередь содержит по одному элементу <option> на предлагаемое значение. Каждое option имеет значение value, которое является соответствующим предлагаемым значением для поля ввода числа.

<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>

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

• <input type="number"> элементы автоматически делают недействительными любые введенные значения, которые не являются числами (или пустые, если не задан required).
• Вы можете использовать атрибут required, чтобы сделать пустое поле недействительным. (Другими словами, ввод обязателен.)
• Вы можете использовать атрибут step для ограничения допустимых значений определённым набором шагов (например, кратными 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>

Попробуйте отправить форму с разными невалидными значениями — например, без значения; значение меньше 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 для отображения соответствующего значка невалидности или валидности в качестве сгенерированного содержимого на смежном элементе <span> как визуального индикатора валидности.

Мы поместили его в отдельный <span> элемент для большей гибкости. Некоторые браузеры не отображают сгенерированное содержимое эффективно для некоторых типов элементов формы. (Например, прочитайте раздел по валидации <input type="date">.)

Элементы <input type="number"> не поддерживают использование атрибута pattern для приведения введённых значений к соответствию определенному шаблону регулярного выражения.

Это связано с тем, что числовые поля не будут валидными, если они содержат что-либо кроме чисел, и вы можете ограничить минимальное и максимальное количество допустимых цифр с помощью атрибутов min и max (как описано выше).

Неявный роль для элемента <input type="number"> — spinbutton. Если spinbutton не является важной функцией вашего элемента управления формой, рассмотрите возможность не использовать type="number". Вместо этого используйте inputmode="numeric" вместе с атрибутом pattern, который ограничивает символы числами и связанными символами. С <input type="number">, есть риск, что пользователи случайно увеличат число, когда пытаются сделать что-то другое. Кроме того, если пользователи пытаются ввести что-то, что не является числом, нет явного отклика о том, что они делают неправильно.

Также рассмотрите использование атрибута autocomplete для помощи пользователям в более быстром и менее ошибочном заполнении форм. Например, чтобы включить автозаполнение поля почтового индекса, задайте autocomplete="postal-code".

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

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

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 и <label>, а также обновление отображаемых значений двух наборов полей ввода при нажатии кнопки.

(Обратите внимание, что мы здесь не конвертируем значения между метрами и футами/дюймами, что, вероятно, сделает реальное веб-приложение.)

• Руководство по HTML-формам
• <input>
• <input type="tel">
• Таблица совместимости свойств CSS
• Статья: Почему команда Gov.UK изменила тип ввода для чисел