Size input: Атрибут size | htmlbook.ru

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

спросил

Изменено 1 год, 4 месяца назад

Просмотрено 45 тысяч раз

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

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

Для и размер Атрибут определяет количество символов, которые должны быть видны. Для все другие типы ввода, размер определяет ширину поля ввода в пикселей.

Если это правда, почему мое поле достаточно широкое, чтобы отобразить 5 ЗАГЛАВНЫХ МММММ?

  • HTML
  • css
  • стандарты
  • таблица стилей

4

Одна и та же «ошибочная» информация указана в спецификации 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.

      

    Пример: Здесь мы использовали два ввода с разными типами ввода, т. е. имя и дата. В имени используется атрибут размера, а в дате используется атрибут даты, оба эти ввода разделяются с помощью
    , а базовый стиль используется в атрибуте заголовка.

     

    < html lang = "en"

    < head >

         < Стиль Тип = "Текст/CSS" >

    LABEL { 9000

    0036            шрифт: 18 пикселей;

    }

    Вход {

    MARGIN: 7PX;

               padding: 2px

             }

         style >

    head >

    < Body >

    < H2 > Укажите ширину входных данных >.

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *