<input type="number"> Значение HTML-атрибута

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

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

Попробуйте

<label for="tentacles">Number of tentacles (10-100):</label>

<input type="number" id="tentacles" name="tentacles" min="10" max="100" />

label {
  display: block;
  font:
    1rem "Fira Sans",
    sans-serif;
}

input,
label {
  margin: 0.4rem 0;
}

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

Значение (Value)

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

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

Дополнительные атрибуты

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

list

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

max

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

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

min

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

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

placeholder

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

Если содержимое элемента управления имеет одно направление текста (LTR или RTL), но подсказку (placeholder) необходимо отобразить в противоположном направлении, вы можете использовать символы форматирования двунаправленного алгоритма Юникода для переопределения направления внутри подсказки; подробнее см. в How to use Unicode controls for bidi text.

readonly

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

step

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

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

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

Использование полей ввода чисел

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

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

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

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

Базовое числовое поле ввода

В своей простейшей форме числовое поле ввода может быть реализовано следующим образом:

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

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

Подсказки (Placeholders)

Иногда полезно предложить контекстную подсказку о том, в какой форме должны быть входные данные. Это может быть особенно важно, если дизайн страницы не предусматривает описательных меток для каждого <input>. Вот где на помощь приходят подсказки (placeholders). Подсказка — это значение, чаще всего используемое для указания формата, который должны иметь входные данные 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.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> для каждого предлагаемого значения. Значение 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>

Валидация

Мы уже упомянули ряд возможностей валидации полей ввода 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">.)

Валидация по шаблону (pattern)

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

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

Доступность

Неявная роль (role) для элемента <input type="number"> — 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">
    <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, не считались невалидными. Мы также добавили подсказку (placeholder) для этого поля.

Изначально мы скрыли поля футов и дюймов с помощью 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"]');

feetInputGroup.style.display = "none"; // Hide feet/inches inputs initially

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