Атрибут размера для поля ввода не учитывается

Question

Взят непосредственно из W3Schools :

Определение и использование Атрибут size определяет ширину поля ввода.

Для <input type="text"> и <input type="password">, атрибут size определяет количество символов, которые должны быть видны.Для всех других типов ввода size определяет ширину поля ввода в пикселях.

Итак.

Если это так, почему мое поле <input type="text" size="2"/> достаточно широкое для отображения5 КАПТИАЛЬНЫХ МММММ?

Answer 1

Та же «ошибочная» информация указана в спецификации HTML4, спецификации HTML5, Sitepoint, Mozilla Developer Network и библиотеке MSDN от Microsoft.Так что это не просто ошибка W3Schools.

В любом случае, хотя в спецификациях говорится, что атрибут size должен быть числом видимых символов, большинство веб-браузеров решили использовать количество единиц em, то есть ширинусимвола заглавной буквы M.

Чтобы указать ширину точно в пикселях или любую другую единицу по вашему выбору, используйте свойство CSS width.

Чтобы ответить на ваш обновленный вопрос: это шириназаглавной буквы M в размере шрифта по умолчанию, применяемом стилем CSS к текстовому полю, но размер шрифта текста внутри текстового поля обычно меньше.

Хотите, чтобы в набор помещалось заданное количество символовкоробка?Вам придется переключиться на шрифт фиксированной ширины.

Answer 2

Проблема в том, что атрибут size = x не в пикселях ... скорее, он обозначает очень приблизительный размер, который элемент <input /> должен содержать x символов.Так, например, <input size=2 /> должен отображать поле ввода, которое может содержать 2 символа.

К сожалению, это варьируется от шрифта к шрифту (особенно шрифты переменной ширины), и поэтому вы, вероятно, заметите, что установкаАтрибут size до 2 фактически отображает поле ввода размером 5 или что-то в этом роде.Однако если вы используете моноширинный шрифт, size=2 должен отобразить текстовое поле, которое может содержать ровно 2 символа ... или, по крайней мере, приблизиться.

Однако, чтобы установить ширину элемента <input>в пикселях, ems и т. д. попробуйте вместо этого использовать CSS-свойство width:

<input type="text" style="width:20px" />

В приведенном выше примере ширина ввода будет ровно 20 пикселей, исключая границы и / или отступы.

Answer 3

Вы не можете воспринимать это буквально, поскольку это невозможно.

Ширина элемента основана на атрибуте size и используемом размере шрифта, но точно не соответствует этому количеству символов, поскольку это невозможно.

Все символы не имеют одинаковую ширину, поэтому символы llll легко поместятся на входе с size="4", но символы mmmm не будут.

Кроме того, добавлено дополнительное пространство, поэтому вход с size="2" не будет в два раза шире, чем вход с size="1".

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

Answer 4

Ответ таков: браузер не может точно определить ширину двух символов, если не использовать шрифт фиксированной ширины.Я думаю, что ваше двухсимвольное поле, вероятно, будет соответствовать двум "m" бок о бок.

Что касается правильности w3schools, то из W3C следует следующее:

size = cdata [CN] Этот атрибут сообщает агенту пользователя начальную ширину элемента управления.Ширина указана в пикселях, кроме случаев, когда атрибут type имеет значение «text» или «password».В этом случае его значение относится к (целому) числу символов.

http://www.w3.org/TR/html4/interact/forms.html#edef-INPUT