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

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

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

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

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

form

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

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

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

input

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

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

Типы

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

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

textarea

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

Атрибуты

select

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

Атрибуты

option

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

Атрибуты:

optgroup

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

Атрибуты

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.