Ширина текстового поля html

Ширина текстового поля html

Однострочное текстовое поле предназначено для ввода строки символов с помощью клавиатуры. Синтаксис создания такого поля следующий.

Значение атрибута type для элемента по умолчанию определено как text , поэтому его можно не указывать явно. Атрибуты текстового поля перечислены в табл. 1.

Табл. 1. Атрибуты однострочного текстового поля

Атрибут Описание
size Ширина текстового поля, которая определяется числом символов моноширинного шрифта. Иными словами, ширина задаётся количеством близстоящих букв одинаковой ширины по горизонтали.
maxlength Устанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле. Когда это количество достигается при наборе, дальнейший ввод становится невозможным. Если этот атрибут не указывать, то можно вводить строку больше самого поля.
name Имя поля; предназначено для того, чтобы обработчик формы мог его идентифицировать.
value Начальный текст отображаемый в поле.

Создание текстового поля показано в примере 1.

Проходить главу «Формы, часть 1» можно после оформления подписки.

Консультация по телефону 8 800 555-86-28 .

Курсы

Профессии

Информация

Услуги

Остальное

Регистрация

Нажимая кнопку «Зарегистрироваться», вы даёте своё согласие на обработку персональных данных в соответствии с «Политикой конфиденциальности» и соглашаетесь с «Условиями оказания услуг».

Восстановление доступа

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

Забыли привязать эл. почту к профилю? Напишите нам, мы поможем.

Ответ достаточно прост и решается следующим методом:

Для начала, надо понять, что происходит с input-элементом при выставлении его ширины в 100% и добавления слева и справа отступов для текста.
Согласно стандартам CSS (а в данном случае их поддерживают все браузеры), результирующая ширина элемента input, при отсутствии границ (border) и внешних отступов полей (margin), будет равна:

Читайте также:  Телефон без рамок дешевый

width = width + padding-left + padding-right

Т.е. она будет больше на величину внутренних горизонтальных отступов, и получившийся при этом элемент будет выступать за отведенную для него область.
Чтобы итоговая ширина была равна 100%, можно использовать систему из двух контейнеров:

Каждый контейнер выполняет свою роль:

  1. input-width – этот контейнер задает результирующую ширину текстового поля;
  2. width-setter – этот контейнер задает ширину input-элемента за вычетом горизонтальных внутренних отступов.

Вот набор стилей, который разъяснит эту конструкцию:

Из стилей получается, что элемент input-width задает ширину, которую должно было занимать текстовое поле. Элемент width-setter задает ширину input-элемента меньше на горизонтальные внутренние отступы. Стоит заметить, что его внешние отступы поля (margin) должны быть равны padding-left и padding-right для элемента input.
При таком описании input-элемент будет выступать из width-setter на величину своих горизонтальных отступов (padding), а в IE6 — растягивать всех «родителей» под собственные размеры (пример 1). Также в браузерах IE6-7 input-элемент имеет отступы, которые нельзя убрать, обнуляя свойство margin. Чтобы изменить такое расположение, надо сдвинуть текстовое поле влево, на размер левого отступа (padding-left). Можно это осуществить через position:relative, но при этом в IE6 останется растянутым под ширину текстового поля input контейнер width-setter. Для устранения растяжения надо сделать так, чтобы элемент не мог влиять на размеры своего родителя, задав, например, ему position:absolute.
Опишем по-новому исходный набор контейнеров:

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

Примечание. Приведенный метод реализации резинового текстового поля проверен на Doctype: HTML 4.01, XHTML 1.0 и HTML (HTML 5) — и имеет кроссбраузерность: IE6-8, Opera 9+, FF 2.0+, Safary 2.0+, Chrome. При отсутствии Doctype кроссбраузерная работоспособность метода не гарантирована.

Ссылка на основную публикацию
Что такое медиана числового ряда
Среднее арифметическое ряда чисел – это сумма данных чисел, поделенная на количество слагаемых. Среднее арифметическое называют средним значением числового ряда....
Что делать если игры не скачиваются
Play Market — официальный магазин приложений для Андроида и главный источник загрузки новых игр и программ на смартфоны и планшеты...
Что делать если заглючил планшет
Если завис планшет леново, самсунг, асус, престижио, дигма и так далее, да еще и в самое неподходящее время радости конечно...
Что такое номер ssid
Компьютеры и телефоны уже давно прочно вошли в нашу жизнь. Помимо смартфонов и ноутбуков, существуют еще десятки устройств, которые имеют...
Adblock detector