<input type="number">

Елементи <input> типу number (число) застосовуються для надання користувачам змоги вводити числа. Вони включають вбудовану валідацію для відхилення нечислового введення.

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

Спробуйте його в дії

В браузерах, що не підтримують полів типу number, такі поля працюють як поля типу text.

Значення

Значення, що представляє значення числа, введеного в поле. Можна встановити усталене значення поля, включивши число в атрибут value, отак:

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

Додаткові атрибути

На додачу до атрибутів, котрі загалом підтримують усі типи <input>, поля типу number підтримують наступні.

list

Значення атрибута list – id елемента <datalist>, розташованого в тому самому документі. <datalist> надає список наперед визначених значень, котрі будуть запропоновані користувачеві для такого поля. Будь-які значення в списку, котрі не сумісні з type, не включаються в запропоновані варіанти. Значення надаються як пропозиції, а не обов'язкові: користувачі можуть обрати з такого наперед визначеного списку або надати інакше значення.

max

Найбільше значення, котре таке поле повинно приймати. Якщо значення, введене в елемент, перевищує max, то елемент не проходить валідацію обмежень. Якщо значення max не є числом, то елемент не має максимального значення.

Це значення мусить бути більшим або рівним значенню атрибута min.

min

Найменше значення, котре таке поле повинно приймати. Якщо значення, введене в елемент, менше за min, то елемент не проходить валідацію обмежень. Якщо значення min не є числом, то елемент не має мінімального значення.

Це значення мусить бути меншим або рівним значенню атрибута max.

placeholder

Атрибут placeholder (заповнювач) – рядок, що надає стислу підказку користувачеві щодо того, якого роду інформація очікується в полі. Це повинно бути слово чи коротка фраза, що демонструє очікуваний тип даних, а не пояснювальне повідомлення. Текст не повинен містити повернень каретки чи символів нового рядка.

Якщо вміст контрольного елемента має одну напрямленість (LTR чи RTL), але треба вивести заповнювач з протилежною напрямленістю, можна використати форматувальні символи двонапрямленого алгоритму Unicode, аби відкинути напрямленість заповнювача; дивіться Як використовувати контрольні засоби Unicode для двонапрямленого тексту для отримання докладнішої інформації.

[!NOTE] За можливості слід уникати використання атрибута placeholder. Він не настільки семантично корисний, як інші способи пояснити форму, і може призвести до неочікуваних технічних проблем зі вмістом. Дивіться підписи <input> для отримання докладнішої інформації.

readonly

Булів атрибут, котрий, коли присутній, означає, що таке поле не може редагуватися користувачем. Проте його значення все ж може бути змінено за допомогою коду JavaScript, що напряму встановлює властивість value об'єкта HTMLInputElement.

[!NOTE] У зв'язку з тим, що поле лише для перегляду не може мати значення, атрибут required не має жодного ефекту на полях, що також мають атрибут readonly.

step

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

Рядкове значення any означає, що жодне крокування не застосовується, тож дозволено будь-яке значення (враховуючи інші обмеження, як то min і max).

[!NOTE] Коли дані, введені користувачем, не відповідають налаштуванням крокування, то користувацький агент може заокруглити значення до найближчого дійсного, віддаючи перевагу числам в додатному напрямку, коли два варіанти однаково близькі.

Усталене значення кроку для полів number – 1, тобто вводити можна лише цілі числа – якщо тільки основа крокування не є дробовим числом.

Використання числових полів

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

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

Елементи <input type="number"> можуть допомогти спростити роботу з побудови користувацького інтерфейсу й логіки введення в форму чисел. При створенні числового поля з правильним значенням type, тобто number, додається автоматична валідація того, що введений текст є числом, а ще, зазвичай, – комплект кнопок вгору й вниз, аби зменшувати чи збільшувати значення на крок.

[!WARNING] Логічно, що не повинно бути змоги вводити в числове поле символи, котрі не є числами. Певні браузери дозволяють недійсні символи, інші – ні; дивіться ваду Firefox 1398528.

[!NOTE] Користувач може погратися з HTML за лаштунками, тому сайт не мусить використовувати просту валідацію на клієнтському боці для жодних потреб безпеки. Розробник мусить перевірити на боці сервера будь-яку транзакцію, в котрій надане значення може мати будь-якого роду безпекові наслідки.

Мобільні браузери заходять в допомозі з користувацьким досвідом іще далі, показуючи особливу клавіатуру, котра краще підходить для введення чисел, коли користувач пробує ввести значення.

Просте числове поле

У своїй найбазовішій формі числове поле може бути реалізовано отак:

<label for="ticketNum">Бажане число квитків:</label>
<input id="ticketNum" type="number" name="ticketNum" value="0" />

Числове поле вважається дійсним, коли пусте і коли введено одне число, інакше – воно недійсне. Якщо застосований атрибут required, то порожнє поле вже не вважається дійсним.

[!NOTE] Будь-яке число є прийнятним значенням, поки є дійсним числом з рухомою комою (тобто не NaN і не Infinity).

Заповнювачі

Іноді корисним є запропонувати контекстну підказку щодо того, в якій формі поле повинно прийняти значення. Це може бути особливо важливим, якщо план сторінки не передбачає описових позначок для кожного <input>. Саме в такому випадку вступають в дію заповнювачі. Заповнювач – значення, що найчастіше використовується для надання підказки щодо того, в якому форматі поле повинно прийняти значення. Воно виводиться всередині поля редагування, коли значення елемента – "". Щойно дані введені в поле, заповнювач зникає; коли поле порожніє, то заповнювач з'являється знову.

В прикладі нижче присутнє поле number з заповнювачем "Кратне 10". Зверніть увагу, як заповнювач зникає й з'являється знову при змінах вмісту поля редагування.

<input type="number" placeholder="Кратне 10" />

Контроль розміру кроку

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

<input type="number" placeholder="кратне 10" step="10" />

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

Задання мінімального й максимального значень

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

<input type="number" placeholder="кратне 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> на кожне пропоноване значення. 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. (Інакше кажучи, таке поле повинно бути заповнене).
• Щоб обмежити дійсні значення певним набором кроків (наприклад, числами, кратними 10), слід застосувати атрибут step.
• Щоб обмежити дійсні значення згори й знизу, слід застосувати атрибути min і max.

Наступний приклад демонструє всі вищеописані можливості, а також використовує трохи CSS для виведення піктограм дійсності й недійсності, залежно від значення input:

<form>
  <div>
    <label for="balloons"
      >Число повітряних кульок до замовлення (кратне 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>

Спробуйте подати форму, ввівши різні недійсні значення: наприклад, без значення; значенням меншим за 10 чи більшим за 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">.)

[!WARNING] Валідація форм HTML не є замінником серверних сценаріїв, котрі пересвідчуються, що введені дані мають відповідний формат!

Кому завгодно занадто легко внести зміни в HTML, котрі дозволять обійти валідацію чи взагалі її усунути. Також можливо, що хтось обійде HTML взагалі й подасть дані напряму на сервер.

Якщо серверний код не справляється з валідацією отриманих даних, може трапитись лихо, коли подаються невідповідно форматовані дані (або дані, що є завеликими, мають помилковий тип і так далі).

Валідація за патерном

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

Обґрунтування цього полягає в тому, що числові поля не є дійсними, коли містять що завгодно, крім чисел, а крім того, можна обмежити мінімальне й максимальне число дійсних цифр за допомогою атрибутів min and max (як пояснено вище).

Доступність

Неявна роль елемента <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">Введіть свій зріст – метрів:</label>
    <input
      id="meters"
      type="number"
      name="meters"
      step="0.01"
      min="0"
      placeholder="напр. 1.78"
      required />
    <span class="validity"></span>
  </div>
  <div class="feetInputGroup" style="display: none;">
    <span>Введіть свій зріст — </span>
    <label for="feet">футів:</label>
    <input id="feet" type="number" name="feet" min="0" step="1" />
    <span class="validity"></span>
    <label for="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="Введіть зріст у футах і дюймах" />
  </div>
  <div>
    <input type="submit" value="Подати форму" />
  </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 = "Введіть зріст у метрах";

    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 = "Введіть зріст у футах і дюймах";

    metersInputGroup.style.display = "block";
    feetInputGroup.style.display = "none";

    feetInput.removeAttribute("required");
    inchesInput.removeAttribute("required");
    metersInput.setAttribute("required", "");

    feetInput.value = "";
    inchesInput.value = "";
  }
});

Після оголошення кількох змінних до button додається слухач повідомлень для контролю механізму перемикання. Це доволі просто, здебільшого полягає в змінах атрибута class і елемента <label>, а також оновленні виведених значень у двох наборах полів, коли натиснена кнопка.

(Зверніть увагу, що тут не розкривається перетворення значень між метрами й футами-дюймами, що реальний вебзастосунок, ймовірно, робив би.)

[!NOTE] Коли користувач клацає кнопку, з поля (чи полів), що приховується, прибирається атрибут required, і очищається атрибут (чи атрибути) value. Це необхідно, щоб форма могла бути подана, якщо заповнені не обидва набори полів. Також це необхідно, щоб форма не подавала дані, котрі користувач подавати не збирався.

Якби це не було зроблено, довелось би вводити фути й дюйми та метри, аби мати змогу подати форму!

Технічний підсумок

Специфікації

Сумісність із браузерами

Дивіться також

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