Руководство по HTML5

Руководство по HTML5

Адам Фриман

Работа с формами

Формы являются механизмом HTML для сбора входных данных от пользователя. Формы невероятно важны для веб приложений, но в течение многих лет функциональность, определяемая в HTML, отстала от того пути, каким используются формы. В HTML5 вся система форм была пересмотрена и приведена в порядок; стандарт был совмещен с самым современным и передовым использованием форм.

В этой главе я опишу основы HTML форм. Я начну с определения очень простой формы и буду ее достраивать, чтобы показать вам, как можно настраивать и управлять работой форм. Я покажу скрипт Node.js, который вы можете использовать для проверки форм и просмотра данных, которые передаются от браузера к серверу.

В следующей главе я расскажу о расширенных функциях формы, в том числе об изменениях в HTML5, которые привлекли наибольшее внимание, новых способах сбора определенных типов данных от пользователя, а также возможности проверки данных в браузере. Это важные усовершенствования, но стоит отметить также и много других изменений. Эта и следующие главы достойны пристального внимания.

Когда я писал это, основные браузеры поддерживали формы HTML5 довольно хорошо, но не идеально, поэтому стоит проверять каждую функциональную особенность, прежде чем использовать ее. В таблице 12-1 приведено краткое содержание этой главы.

Таблица 12-1: Краткое содержание главы
Задача Решение Листинг
Создать простую форму. Использовать элементы form, input и button. 1
Указать URL, на который отправляются данные формы. Использовать атрибут action элемента form (или атрибут formaction элемента button) 315)
Указать, каким образом кодируются данные формы для передачи на сервер. Использовать атрибут enctype элемента form (или атрибут formenctype элемента button) 415)
Управлять авто-заполнением. Использовать атрибут autocomplete элемента form или элемента input. 5, 6
Указать, где должен быть отображен ответ сервера. Использовать атрибут target элемента form (или атрибут formtarget элемента button) 7
Указать название формы. Использовать атрибут name элемента form 8
Добавить метку для элемента input. Использовать элемент label. 9
Автоматически сфокусироваться на элементе input после загрузки формы. Использовать атрибут autofocus элемента input. 10
Отключить отдельный элемент input. Использовать атрибут disabled элемента input. 11
Сгруппировать элементы input. Использовать элемент fieldset. 12
Добавить описательную метку элементу fieldset. Использовать элемент legend. 13
Отключить группу элементов input. Использовать атрибут disabled элемента fieldset. 14
Использовать элемент button для отправки формы. Установить значение атрибута type на submit. 15
Использовать элемент button для сброса формы. Установить значение атрибута type на reset. 16
Использовать элемент button как общую кнопку управления. Установить значение атрибута type на button. 17
Связать элемент с элементом form, который не является предшествующим. Использовать атрибут form. 18

Создание простой формы

Настройка формы

Добавление в форму меток

Автоматическая фокусировка на элементе input

Отключение отдельных элементов input

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

Использование элемента button

Работа с элементами вне формы

Резюме

или RSS канал: Что новенького на smarly.net