html — Атрибут размера для поля ввода не учитывается
спросил
Изменено 1 год, 4 месяца назад
Просмотрено 45 тысяч раз
Взято непосредственно из W3Schools:
Определение и использование Атрибут size указывает ширину поле ввода.
Для
и
размер Атрибут определяет количество символов, которые должны быть видны. Для все другие типы ввода, размер определяет ширину поля ввода в пикселей.
Если это правда, почему мое поле
достаточно широкое, чтобы отобразить 5 ЗАГЛАВНЫХ МММММ?
- HTML
- css
- стандарты
- таблица стилей
Одна и та же «ошибочная» информация указана в спецификации HTML4, спецификации HTML5, Sitepoint, Mozilla Developer Network и библиотеке Microsoft MSDN. Так что это не только вина W3Schools.
Во всяком случае, в то время как спецификации говорят, что атрибут размера должен быть количеством видимых символов, большинство веб-браузеров остановились на использовании количества единиц em, что означает ширину символа заглавной буквы M.
Чтобы указать ширину точно в пикселях или в любых единицах по вашему выбору, используйте свойство ширины CSS.
Чтобы ответить на ваш обновленный вопрос: это ширина заглавной буквы M в размере шрифта по умолчанию, применяемом стилем CSS к текстовому полю, но размер шрифта текста внутри текстового поля обычно меньше.
Хотите, чтобы внутри коробки поместилось определенное количество символов? Вам придется переключиться на шрифт фиксированной ширины.
3 Проблема в том, что атрибут size = x
не в пикселях… скорее, он обозначает тот самый приблизительный размер , которым должен быть элемент
для хранения x
символов. Так, например,
должно отображать поле ввода, которое может содержать 2 символа.
К сожалению, это зависит от шрифта к шрифту (особенно для шрифтов с переменной шириной), поэтому вы, вероятно, заметите, что установка атрибута размера на 2 фактически отобразит поле ввода размером 5 или что-то в этом роде. Однако, если вы используете моноширинный шрифт, size=2
должно отображать текстовое поле, которое может содержать ровно 2 символа… или, по крайней мере, приблизиться.
Однако, чтобы установить ширину элемента
в пикселях, ems и т. д., попробуйте вместо этого использовать свойство CSS width
:
В приведенном выше примере ширина ввода будет ровно 20 пикселей, исключая границы и/или отступы.
1
Нельзя понимать это буквально, так как это невозможно.
Ширина элемента основана на атрибуте size
и используемом размере шрифта, но она не будет точно соответствовать этому количеству символов, потому что это невозможно.
Все символы не имеют одинаковой ширины, поэтому символы llll
легко поместятся во вводе с size="4"
, а символы mmmm
— нет.
Кроме того, добавлено дополнительное пространство, поэтому ввод с size="2"
не будет в два раза шире, чем ввод с размер="1"
То, что используется в качестве средней ширины символа, может зависеть от браузера. Я тестировал в Firefox и не нашел ни одного точно соответствующего символа, но символ *
довольно хорошо соответствует этой средней ширине.
1
Ответ заключается в том, что, если не используется шрифт фиксированной ширины, браузер не может точно определить ширину двух символов. Я думаю, что ваше поле из двух символов, вероятно, поместится рядом с двумя буквами «m».
Что касается правильности w3schools, то от W3C следующее:
размер = cdata [CN] Этот атрибут сообщает пользовательскому агенту начальную ширину элемента управления.
Ширина указывается в пикселях, за исключением случаев, когда атрибут type имеет значение «текст» или «пароль». В этом случае его значение относится к (целое) количество символов.
http://www.w3.org/TR/html4/interact/forms.html#edef-INPUT
Другой/внешний класс CSS может повлиять на размер или встроенный CSS.
Мой случай:
при использовании внешнего div с классом «группа ввода» размер или встроенный стиль вообще не будут работать. Удаление этого класса «группы ввода», если это возможно, заставит его работать.
<дел> <Требуется тип ввода = "текст">
Зарегистрируйтесь или войдите в систему
Зарегистрируйтесь с помощью Google
Зарегистрироваться через Facebook
Зарегистрируйтесь, используя адрес электронной почты и пароль
Опубликовать как гость
Электронная почта
Обязательно, но не отображается
Опубликовать как гость
Электронная почта
Требуется, но не отображается
Как указать ширину элемента ввода в HTML5?
Улучшить статью
Сохранить статью
- Последнее обновление: 12 мар, 2021
Улучшить статью
Сохранить статью
В этой статье мы собираемся указать ширину элемента ввода. Это можно сделать с помощью атрибута size или атрибута width для установки ширины элемента.
Атрибут размера работает со следующими типами ввода: текст, поиск, телефон, URL, электронная почта и пароль, а не с типом даты, изображения, времени, для которых мы можем использовать атрибут ширины.
Создайте div, в который мы помещаем наш ввод. Мы возьмем 2 входа: имена и даты. Для ввода имени мы будем использовать тип ввода — атрибут имени и размера. Для ввода даты мы будем использовать тип ввода — дату и атрибут ширины (атрибут размера не будет работать для типа даты).
Синтаксис: Для атрибута размера.
Синтаксис: Для ширины CSS.
Пример: Здесь мы использовали два ввода с разными типами ввода, т. е. имя и дата. В имени используется атрибут размера, а в дате используется атрибут даты, оба эти ввода разделяются с помощью
, а базовый стиль используется в атрибуте заголовка.
|