Тип ввода типа HTML5

Я пишу форму в HTML5. Один из входов - type=number. Я хочу, чтобы на входе отображалось только 2 цифры, но, по-видимому, по умолчанию отображается не менее 5 цифр, что занимает дополнительное пространство. Я попытался добавить атрибут size="2" без эффекта.

Этот тег, который я использую:

<input type="number" name="numericInput" size="2" min="0" max="18" value="0" />

Что мне не хватает?

Ответы

Ответ 1

Ввод номера HTML5 не имеет атрибутов стилей, таких как ширина или размер, но вы можете легко стилизовать его с помощью CSS.

input[type="number"] {
   width:50px;
}

Ответ 2

К сожалению, в HTML 5 атрибут 'pattern' связан только с 4-5 атрибутами. Однако, если вы захотите использовать поле "текст" вместо этого и конвертировать в число позже, это может вам помочь;

Это ограничивает ввод от 1 символа (числового) до 3.

<input name=quantity type=text pattern='[0-9]{1,3}'>

CSS в основном позволяет подтвердить с помощью "Thumbs up" или "Down".

Пример 1

Пример 2

Ответ 3

Я искал одно и то же решение, и это сработало для меня... добавьте встроенный тег css для управления шириной ввода.

Например: 

<input type="number" min="1" max="5" style="width: 2em;">

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

Ответ 4

Есть только 4 определенных атрибута:

  • value - Значение является значением по умолчанию для поля ввода при первой загрузке страницы. Это общий атрибут для элемента, независимо от того, какой тип вы используете.
  • min - Очевидно, минимальное значение вашего номера. Я должен был указать минимальное значение 0 для моей демо-версии, так как отрицательное число не имеет смысла для количества просмотренных фильмов за неделю.
  • max - По-видимому, это самый большой номер ввода числа.
  • step - Шаг масштабного коэффициента, значение по умолчанию - 1, если этот атрибут не указан.

Таким образом, вы не можете контролировать длину какого типа пользователя по ключевому слову. Но реализация браузеров может измениться.

Ответ 5

Также вы можете заменить атрибут size на атрибут style:
<input type="number" name="numericInput" style="width: 50px;" min="0" max="18" value="0" />

Ответ 6

Есть способ:

<input type="number" min="0" max="100" step="5"/>

Ответ 7

<input type="number" name="numericInput" size="2" min="0" maxlength="2" value="0" />