Работа с формами
Формы являются механизмом HTML для сбора входных данных от пользователя. Формы невероятно важны для веб приложений, но в течение многих лет функциональность, определяемая в HTML, отстала от того пути, каким используются формы. В HTML5 вся система форм была пересмотрена и приведена в порядок; стандарт был совмещен с самым современным и передовым использованием форм.
В этой главе я опишу основы HTML форм. Я начну с определения очень простой формы и буду ее достраивать, чтобы показать вам, как можно настраивать и управлять работой форм. Я покажу скрипт Node.js, который вы можете использовать для проверки форм и просмотра данных, которые передаются от браузера к серверу.
В следующей главе я расскажу о расширенных функциях формы, в том числе об изменениях в HTML5, которые привлекли наибольшее внимание, новых способах сбора определенных типов данных от пользователя, а также возможности проверки данных в браузере. Это важные усовершенствования, но стоит отметить также и много других изменений. Эта и следующие главы достойны пристального внимания.
Когда я писал это, основные браузеры поддерживали формы HTML5 довольно хорошо, но не идеально, поэтому стоит проверять каждую функциональную особенность, прежде чем использовать ее. В таблице 12-1 приведено краткое содержание этой главы.
Таблица 12-1: Краткое содержание главы
| Задача | Решение | Листинг |
| Создать простую форму. | Использовать элементы form, input и button. |
1 |
| Указать URL, на который отправляются данные формы. | Использовать атрибут action элемента form (или атрибут formaction элемента button) |
3 (и 15) |
| Указать, каким образом кодируются данные формы для передачи на сервер. | Использовать атрибут enctype элемента form (или атрибут formenctype элемента button) |
4 (и 15) |
| Управлять авто-заполнением. | Использовать атрибут 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
