Взято непосредственно из W3Schools:
Определение и использование Атрибут size определяет ширину поле ввода.
Для
<input type="text">и<input type="password">размер Атрибут определяет количество символов, которые должны быть видимыми. Для все другие типы ввода, размер определяет ширину поля ввода в пикселей.
Если это так, почему мое поле <input type="text" size="2"/> достаточно велико, чтобы отобразить 5 CAPTIAL MMMMM?
Такая же "ошибочная" информация указана в спецификации HTML4, спецификации HTML5, Sitepoint, Mozilla Developer Network и Microsoft MSDN. Таким образом, это не просто ошибка W3Schools.
В любом случае, в то время как в спецификациях утверждается, что атрибутом размера должно быть количество видимых символов, большинство веб-браузеров решили использовать количество единиц em, что означает ширину символа капитала M.
Чтобы указать ширину точно в пикселях или любой выбранной вами единице, используйте свойство ширины CSS.
Чтобы ответить на ваш обновленный вопрос: это ширина капитала M в размере шрифта по умолчанию, применяемая стилем CSS в текстовое поле, но размер шрифта текста внутри текстового поля обычно меньше.
Хотите сделать определенное количество символов, помещенных внутри коробки? Вам придется переключиться на шрифт с фиксированной шириной.
Проблема заключается в том, что атрибут size = x не находится в пикселях... скорее, он обозначает очень приблизительный размер, который должен содержать элемент <input /> для хранения символов x. Так, например, <input size=2 /> должен отображать поле ввода, которое может содержать 2 символа.
К сожалению, это зависит от шрифта и шрифта (например, ширины шрифта переменной ширины), и поэтому вы, вероятно, заметите, что установка атрибута размера на 2 фактически отображает поле ввода размером 5 или что-то в этом роде. Если вы используете моноширинный шрифт, size=2 должен отображать текстовое поле, которое может содержать ровно 2 символа... или хотя бы приблизиться.
Однако, чтобы установить ширину элемента <input> в пикселях, ems и т.д., попробуйте вместо этого использовать свойство width CSS:
<input type="text" style="width:20px" />
В приведенном выше примере ширина ввода будет составлять ровно 20 пикселей, за исключением границ и/или заполнения.
Вы не можете воспринимать это буквально, поскольку это невозможно.
Ширина элемента основывается на атрибуте size и используемом размере шрифта, но он точно не соответствует этому количеству символов, потому что это невозможно.
Все символы не имеют одинаковой ширины, поэтому символы llll будут легко помещаться на входе с size="4", но символы mmmm не будут.
Кроме того, добавлено дополнительное пространство, поэтому вход с size="2" не будет в два раза шире ввода с size="1".
То, что используется как средняя ширина символа, может зависеть от браузера. Я тестировал в Firefox, и я не нашел ни одного символа, который точно соответствует, но символ * очень хорошо соответствует этой средней ширине.
Ответ заключается в том, что, если не использовать шрифт с фиксированной шириной, браузер не может точно определить ширину двух символов. Я думаю, что ваше поле с двумя символами, вероятно, поместило бы два "m" s бок о бок.
Что касается корректности w3schools, из W3C следует следующее:
size = cdata [CN] Этот атрибут сообщает пользовательскому агенту начальную ширину элемента управления. Ширина указана в пикселях, кроме случаев, когда атрибут type имеет значение "текст" или "пароль". В этом случае его значение относится к (целое число) символов.