19. Формы и элементы управления.

HTML-форма (далее: форма) – раздел HTML-документа, содержащий обычную разметку и элементы управления.

«Классические» элементы управления в HTML:

• кнопка;
• флажок (чекбокс);
• радиокнопка;
• список значений для выбора;
• текстовое поле;
• пароль;
• скрытое поле;
• элемент для выбора и отправки файлов на сервер.

HTML5 дополнительно предлагает новые элементы управления.

С каждым элементом управления формы связано начальное и текущее значение. Значения могут изменяться при взаимодействии пользователя или скриптов с формой. Данные элементов формы отправляются (submit) на обработку в виде пар имя_элемента=значение. При очистке (reset) формы элементы приобретают начальные значения.

form

Контейнерный элемент form ограничивает форму. В документе может быть несколько форм, однако формы не могут вкладываться друг в друга.

• Атрибут action содержит URL обработчика формы (т.е. куда будут переданы данные формы). Если action отсутствует, при отправке формы текущая страница перезагружается, возвращая все элементы формы к их значениям по умолчанию.
• Атрибут method указывает метод HTTP для отправки запроса: post или get (по умолчанию).
• accept-charset название кодировки для данных формы

• autocomplete автозаполнение полей формы (on

  off) (HTML5)

• enctype способ кодирования данных формы: application/x-www-form-urlencoded, multipart/form-data, text/plain
• name имя формы (для доступа к элементам через скрипты)
• novalidate (логический) отменяет встроенную в браузер проверку данных формы на корректность ввода (HTML5)
• target куда будет загружаться возвращаемый результат от сервера (фрейм, окно, новое окно, …)

Атрибуты формы

<form action="http://example.com/app/profile.php" method="post" name="main" novalidate autocomplete="on" target="_blank">
...
</form>

input

Элемент input может использоваться для создания текстовых полей, кнопок, переключателей и флажков. Вид элемента управления задаёт атрибут type:

• text текстовое поле
• button кнопка
• password поле с паролем
• submit кнопка для отправки формы
• radio переключатель
• reset кнопка для очистки формы
• checkbox флажок
• image кнопка с изображением
• hidden скрытое поле
• file поле для отправки файла

Для элемента input работают атрибуты, связанные с получением фокуса и клавиатурными сокращениями.

• name уникальное имя элемента, используется при отправке данных на сервер
• value значение элемента формы
• autocomplete автозаполнение (для конкретного поля)
• disabled блокирует доступ и изменение элемента: не работает переход по tab, значение не передается на сервер
• readonly значение элемента не может изменяться
• autofocus (логический) автоматически устанавливает фокус в поле
• form связывает поле с формой по идентификатору формы (её атрибут id). Необходим, когда поле располагается за пределами формы (например, по соображениям дизайна)
• formaction, formenctype, formmethod, formnovalidate, formtarget перекрывают значения соответствующих атрибутов формы. Задаются для кнопок!
• placeholder выводит текст внутри поля формы, который исчезает при получении фокуса или при наборе текста
• required (логический) поле формы обязательно для заполнения

Типы

type="text" и type="password" - элементы управления для ввода строки текста или пароля (такая строка, где вместо символов отображаются спецзнаки, например, ●). Видимая ширина элемента в символах моноширинного шрифта задаётся атрибутом size. Атрибут maxlength ограничивает максимальное число вводимых символов.

type="checkbox" и type="radio" образуют группы независимых и зависимых переключателей. В случае зависимых переключателей (type="radio") у всех элементов одной группы обязательно должно быть одинаковое значение атрибута name. Логический атрибут checked показывает, что соответствующий переключатель установлен.

type="button" – это простая кнопка, которая генерирует событие нажатия (что с этим делать – решает JavaScript).

type="submit" – запускает оправку данных формы.

type="reset" – при нажатии на кнопку элементы формы получают свои начальные значения (указанные в value или при помощи checked).

У кнопок можно задавать атрибуты name (важно для JS), disabled, value (это то, что будет надпись на кнопке). Если value не задан, браузер подставит стандартную надпись (например, «Отправить» или «Submit»).

type="image" – это изображение, нажатие на которое работает как кнопка type=”submit”. Внешний вид настраивается атрибутами, применимыми к элементу img: src, alt, border, height, width. Нажатие на кнопку type="image" не только передаёт на сервер данные элементов управления внутри формы, но также посылает информацию о координатах точки нажатия на картинке:

type="file". Чтобы выбрать на локальном компьютере файл и загрузить его на сервер, используется input с типом "file". При этом в атрибуте accept могут быть перечислены допустимые MIME-типы файлов. У формы надо указать enctype=”multipart/form-data” (и использовать метод POST).

type="hidden" Элемент input с типом "hidden" создаёт на форме скрытое поле. Такое поле не может редактироваться пользователем (хотя его можно изменить при помощи JavaScript). Одно из назначений скрытого поля – хранение клиенто-специфичной информации в рамках одной страницы.

Новые типы для input в HTML5

• color Виджет для выбора цвета.
• date Поле для выбора календарной даты.
• datetime Указание даты и времени.
• datetime-local Указание местной даты и времени.
• email Для адресов электронной почты.
• number Ввод чисел.
• range Ползунок для выбора чисел в указанном диапазоне.
• search Поле для поиска.
• tel Для телефонных номеров.
• time Для времени.
• url Для веб-адресов.
• month Выбор месяца.
• week Выбор недели.

Для новых типов элементов доступны и новые атрибуты.

• min (max) нижнее (верхнее) значение для ввода числа или даты (type=number|range|date)
• pattern регулярное выражение для ввода и проверки данных в поле формы (type=email|tel|text|search|url)
• step шаг изменения числа для ползунков и полей ввода чисел (type=number|range)

textarea

Контейнерный элемент управления textarea – это область для ввода нескольких строк текста. В тексте можно делать переносы строк (они сохраняются при отправке данных на сервер).

Атрибуты

• cols ширина поля в символах
• disabled блокирует доступ и изменение элемента
• name имя поля формы
• readonly поле не может изменяться пользователем
• rows высота поля в строках текста
• autofocus автоматическое получение фокуса
• form связывает текстовое поле с формой
• maxlength максимальное число символов
• placeholder замещающий текст
• required обязательное для заполнения

select

При помощи элемента select можно создать выпадающий список (drop-down list) или список с одним или множественным выбором. Вид списка зависит от атрибута size, который устанавливает высоту списка (в элементах). Каждый пункт списка создается при помощи элемента option, вложенного в контейнер select.

Атрибуты

• Вид списка задаёт атрибут size (по умолчанию = 1).
• Указание логического атрибута multiple позволяет выбрать несколько элементов списка.
• disabled блокирует доступ и изменение списка.
• name имя элемента для отправки на сервер или обращения через скрипты.

option

Определяет отдельные пункты списка в контейнере select.

Атрибуты:

• disabled пункт списка заблокирован для выбора
• label отображаемая метка пункта списка
• selected элемент списка выделен (заранее)
• value значение пункта списка, которое будет отправлено на сервер

optgroup

Несколько пунктов списка можно объединить в визуальную группу при помощи контейнера optgroup. Саму группу нельзя выбрать, заголовок группы выделен, а элементы – визуально смещены.

Атрибуты

• disabled вся группа заблокирована для выбора
• label заголовок группы

datalist

Контейнер datalist – это набор вариантов для выбора (элементы option), связанный с элементом input при помощи атрибута list, заданного у input. Контейнер становится видимым, если input получает фокус ввода.

button

Этот контейнерный элемент представляет кнопку с универсальным содержимым (необязательно только текстом – может быть комбинация текста и картинки, абзацы, таблицы ☺).

Тип кнопки определяется атрибутом type (button|reset|submit). Остальные атрибуты, в принципе, совпадают с таковыми у элемента input, представляющего кнопку.

Группировка элементов в форме

Элементы управления в форме можно сгруппировать, поместив их в контейнер(ы) fieldset. Всю группу можно заблокировать (атрибут disabled) и добавить к ней всплывающую подсказку (атрибут title). Подписывают группу при помощи элемента legend.

Элемент label устанавливает связь между определенной меткой (обычно – текст) и элементом управления формы (input, select, textarea). Если связь есть, то нажатие мышью на метке ведёт к переходу фокуса к элементу управления.

Существует два способа связывания объекта и метки.

1. Использовать атрибут id внутри элемента формы и указать его имя в качестве значения атрибута for у label.
2. Поместить элемент формы внутрь контейнера label.