Тип введення “число” не змінить розмір

Чому мій розмір вводу не змінюється, коли я зміню тип, type="number"але він працює type="text"?

ПРИКЛАД

    Email: <input type="text" name="email" size="10"><br/>
  number: <input type="number" name="email" size="10">

Здається, inputтип numberне підтримує sizeатрибут або він несумісний з браузерами, ви можете встановити його через CSS:

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

Оновлена ​​скрипка

Неправильне використання.

Номер типу введення, який він має для вибору значення за допомогою стрілок вгору та вниз.

Отже, ви в основному шукаєте стиль CSS "по ширині".

Вхідний текст історично відформатований моношаричним шрифтом, тому розмір - це також ширина, яку потрібно.

Введіть номер нового, а властивість "size" взагалі не має сенсу *. Типове використання:

<input type="number" name="quantity" min="1" max="5">

документи w3c

щоб виправити, додайте стиль:

<input type="number" name="email" style="width: 7em">

РЕДАГУВАТИ: якщо ви хочете діапазон, ви повинні встановити, type="range"а ні="number"

EDIT2: * розмір не є дозволеним значенням (отже, немає сенсу). Перевірте офіційні технічні характеристики W3C

Примітка: Атрибут size працює з такими типами введення: текст, пошук, тел, url, електронна пошта та пароль.

Порада. Щоб вказати максимальну кількість символів, дозволених в елементі, використовуйте атрибут maxlength.

Замість того, щоб встановлювати довжину, встановіть максимальне та мінімальне значення для введення числа.

Потім поле введення змінює розмір відповідно до найдовшого допустимого значення.

Якщо ви хочете дозволити 3-значне число, встановіть 999 як макс

 <input type="number" name="quantity" min="0" max="999">

Адже <input type=number>за HTML5 CR sizeатрибут не допускається. Однак у " Застарілих функціях" сказано: "Автори не повинні, але можуть, незважаючи на вимоги, що зворотні в іншому місці цієї специфікації, вказувати атрибути maxlength і size на вхідних елементах, атрибути типу яких знаходяться у стані Number. Однією з вагомих причин використання цих атрибутів незалежно є допомога застарілим користувальницьким агентам, які не підтримують вхідні елементи з типом = "число", все одно відображати текстове поле з корисною шириною.

Таким чином, sizeатрибут може бути використаний, але він впливає лише на старі браузери, які не підтримують type=number, так що елемент повертається до простого текстового елемента управління <input type=text>.

Обґрунтування цього полягає в тому, що браузер повинен забезпечити користувальницький інтерфейс, який враховує інші атрибути, для зручності використання. Оскільки реалізації можуть відрізнятися, будь-який розмір, накладений автором, може зіпсувати речі. (Це також стосується встановлення ширини елемента керування в CSS.)

Висновок полягає в тому, що вам слід використовувати <input type=number>більш-менш рідинну установку, яка не робить жодних припущень щодо розмірів елемента.

Те, що ти хочеш, це maxlength.

Дійсно для text, search, url, tel, email, і password, вона визначає максимальне число символів (як UTF-16 кодових одиниць) користувач може ввести в поле. Це має бути ціле значення 0 або вище. Якщо не вказано максимальну довжину або вказано недійсне значення, поле не має максимальної довжини. Це значення також повинно бути більшим або рівним значенню мінної довжини.

Ви можете розглянути можливість використання одного з цих inputтипів.

Використовуйте подію onkeypress. Приклад для поштового індексу. Він дозволяє мати максимум 5 символів і перевіряє, чи вводяться лише цифри.

Звичайно, ніщо не може перевершити перевірку на стороні сервера, але це чудовий шлях.

function validInput(e) {
  e = (e) ? e : window.event;
  a = document.getElementById('zip-code');
  cPress = (e.which) ? e.which : e.keyCode;

  if (cPress > 31 && (cPress < 48 || cPress > 57)) {
    return false;
  } else if (a.value.length >= 5) {
    return false;
  }

  return true;
}

#zip-code {
  overflow: hidden;
  width: 60px;
}

<label for="zip-code">Zip Code:</label>
<input type="number" id="zip-code" name="zip-code" onkeypress="return validInput(event);" required="required">

змінити type = "number" на type = "tel"