Текстовое поле
Однострочное текстовое поле предназначено для ввода строки символов с помощью клавиатуры. Синтаксис создания такого поля следующий.
<input атрибуты>
Значение атрибута type для элемента <input> по умолчанию определено как text, поэтому его можно не указывать явно. Атрибуты текстового поля перечислены в табл. 1.
Атрибут | Описание |
---|---|
size | Ширина текстового поля, которая определяется числом символов моноширинного шрифта. Иными словами, ширина задаётся количеством близстоящих букв одинаковой ширины по горизонтали. |
maxlength | Устанавливает максимальное число символов, которое может быть введено пользователем в текстовом поле. Когда это количество достигается при наборе, дальнейший ввод становится невозможным. Если этот атрибут не указывать, то можно вводить строку больше самого поля. |
name | Имя поля; предназначено для того, чтобы обработчик формы мог его идентифицировать. |
value | Начальный текст отображаемый в поле. |
Создание текстового поля показано в примере 1.
Пример 1. Текстовое поле
В результате получим следующее (рис. 1).
Рис. 1. Вид текстового поля
Ширина текстового поля — величина нестабильная и в разных браузерах может меняться в небольших пределах. Для формы, которая располагается в колонке ограниченной ширины, подобные изменения приводят к нарушению исходного макета. Так что лучше вообще отказаться от использования атрибута size и задать параметры поля через стили. К тому же CSS позволяет изменять цвет фона, тип шрифта и рамки вокруг поля, как показано в примере 2.
Пример 2. Изменение вида текстового поля
Поскольку общая ширина элемента суммируется из значений width, padding и border, то мы получим поле, которое будет выходить за пределы окна браузера. Чтобы этого не произошло, добавлено свойство box-sizing со значением border-box, оно изменяет алгоритм расчёта ширины и ширина поля будет равна 100% независимо от значений других свойств. В результате получим поле следующего вида (рис. 2).
Рис. 2. Вид текстового поля после применения стилей
См. также
- <input>
- Выравнивание элементов форм
- Загрузка файлов
- Кнопки
- Кнопки
- Отправка данных формы
- Переключатели
- Переключатели
- Поле для ввода пароля
- Поле для пароля
- Пользовательские формы
- Построение форм
- Скрытое поле
- Стилизация переключателей
- Стилизация флажков
- Сумасшедшие формы
- Текстовое поле
- Флажки
- Флажки
- Формы в Bootstrap 4
- Формы в HTML