Элемент <input>
Основное применение INPUT – приём данных от пользователя, но INPUT может быть кнопкой и просто выводить информацию. За его функциональность отвечает атрибут type.
В таблице перечислены возможные значения атрибута type и получаемый вид поля формы.
Тип | Описание | Вид |
button | Кнопка | |
checkbox | Флажки. Позволяют выбрать более одного варианта из предложенных. |
Чай Кофе |
file | Поле для ввода имени файла, который пересылается на сервер. | |
password | Все символы показываются звездочками. | |
radio | Переключатели. Используются, когда следует выбрать один вариант из нескольких . |
Чай Кофе |
reset | Кнопка для возвращения данных формы в первоначальное значение. | |
submit | >Кнопка для отправки данных формы на сервер. | |
text | Текстовое поле. Предназначено для ввода символов с помощью клавиатуры. | |
Для адресов электронной почты. | ||
range | Ползунок для выбора чисел в указанном диапазоне. | |
search | Поле для поиска. | |
url | Для веб-адресов. |
Атрибуты INPUT
Можно установить шаблон ввода данных через атрибут pattern.
Например: <input name="name" pattern="^[ 0-9]+$"> - ввод только чисел.
Выражение | Описание |
---|---|
\d [0-9] | Одна цифра от 0 до 9. |
\D [^0-9] | Любой символ кроме цифры. |
\s | Пробел. |
[A-Z] | Только заглавная латинская буква. |
[A-Za-z] | Только латинская буква в любом регистре. |
[А-Яа-яЁё] | Только русская буква в любом регистре. |
[A-Za-zА-Яа-яЁё] | Любая буква русского и латинского алфавита. |
[0-9]{3} | Три цифры. |
[A-Za-z]{6,} | Не менее шести латинских букв. |
[0-9]{,3} | Не более трёх цифр. |
[0-9]{5,10} | От пяти до десяти цифр. |
^[a-zA-Z]+$ | Любое слово на латинице. |
^[А-Яа-яЁё\s]+$ | Любое слово на русском включая пробелы. |
^[ 0-9]+$ | Любое число. |
\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3} | IP-адрес. |
\d+(,\d{2})? | Цена в формате 1,34 (разделитель запятая). |
\d+(\.\d{2})? | Цена в формате 2.10 (разделитель точка). |
#[0-9A-Fa-f]{6} | шестнадцатеричное значение цвета (#ffcc00). |
Можно установить атрибут required для обязательного заполнения поля.
Например: <input name="name" required pattern="^[ 0-9]+$"> - обязательный ввод чисел.
Атрибут placeholder делает подсказку, что надо вводить в поле.
Например: <input name="name" placeholder="Ваше имя">.
Атрибут readonly делает INPUT доступным только для чтения, то есть он служит неким табло и внего нельзя вводить данные.
<textarea>
TEXTAREA отличается от INPUT тем, что можно вводить несколько строк текста. Количество символов, которое можно ввести в поле не ограничено, можно делать переносы строк и они сохраняются при отправке текста на сервер. Атрибутыaccesskey
Переход к полю с помощью сочетания клавиш.
autofocus
Автоматическое получение фокуса.
cols
Ширина поля в символах.
disabled
Блокирует доступ и изменение элемента.
form
Связывает текстовое поле с формой по её идентификатору.
maxlength
Максимальное число введенных символов.
name
Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.
placeholder
Указывает замещающийся текст.
readonly
Устанавливает, что поле не может изменяться пользователем.
required
Обязательное для заполнения поле.
rows
Высота поля в строках текста.
tabindex
Порядок перехода между элементами при нажатии на клавишу Tab.
wrap
Параметры переноса строк.
Пример
<textarea rows="10" cols="45" name="text">...</textarea>