HTML5. Работа с веб - формами

Функциональность сайтов, предоставляющих пользователю возможность ввода данных и получения результатов их обработки, обеспечивается использованием программ, работающих на стороне сервера — серверных приложений. Эти приложения обрабатывают полученные от посетителя Web-сайта данные и выдают результат в виде обычной Web-страницы. Именно для них в HTML предусмотрена возможность создания Web-форм и элементов управления — чтобы посетитель мог ввести данные, которые потом обработает серверное приложение

Вот основная схема работы серверного приложения.

1. Посетитель вводит в элементы управления, расположенные в Web-форме на Web-странице, нужные данные.
2. Введя данные, посетитель нажимает расположенную в той же Web-форме особую кнопку — кнопку отправки данных.
3. Web-форма кодирует введенные в нее данные и отправляет их серверному приложению, расположенному по указанному интернет-адресу.
4. Web-сервер перехватывает отправленные данные, запускает серверное приложение и передает данные ему.
5. Серверное приложение обрабатывает полученные данные.
6. Серверное приложение формирует Web-страницу с результатами обработки данных посетителя и передает ее Web-серверу.
7. Web-сервер получает сформированную серверным приложением Web-страницу и отправляет ее посетителю.

Для обеспечения взаимодействия между серверным приложением и пользователем используются веб - формы.

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

Документ может содержать любое количество форм, но одновременно на сервер может быть отправлена только одна форма. По этой причине данные форм должны быть независимы друг от друга.

Элементы управления

По сути, форма – контейнер для элементов управления (кнопок, списков, полей ввода).

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

К поддерживаемым HTML элементам управления относят:

• Флажок (checkbox) – предлагает пользователю ряд вариантов, и разрешает выбор нескольких из них.
• Переключатель(radio) – предлагает пользователю ряд вариантов, но разрешает выбрать только один из них.
• Кнопка сброса формы(Reset).При нажатии на кнопку сброса, все элементы формы будут установлены в то состояние, которое было задано в атрибутах по умолчанию, причем отправка формы не производится.
• Выпадающий список (select). Тэг <select> представляет собой выпадающий или раскрытый список, при этом одновременно могут быть выбраны одна или несколько строк.
• Текстовое поле (text). Позволяет пользователям вводить различную информацию.
• Поле для ввода пароля (password). Полностью аналогичен текстовому полю, за исключением того что символы, набираемые пользователем, не будут отображаться на экране.
• Многострочное поле ввода текста (textarea). Многострочное поле ввода текста позволяет отправлять не одну строку, а сразу несколько. По умолчанию тег создает пустое поле шириной в 20 символов и состоящее из двух строк.
• Скрытое текстовое поле. Позволяет передавать сценарию какую то служебную информацию, не отображая её на странице.
• Кнопка отправки формы (submit). Служит для отправки формы сценарию.
• Кнопка для загрузки файлов (browse). Служит для реализации загрузки файлов на сервер.
• Рамка (fieldset) Объект fieldset позволяет вам нарисовать рамку вокруг объектов. Имеет закрывающий тэг </fieldset>. Заголовок указывается в тэгах <legend> </legend>. Основное назначение объекта – задание различных стилей оформления.

Отправка данных на сервер

Для того чтобы успешно подготовить введенные посетителем данные и отправить их серверному приложению, Web-форма должна "знать" метод отправки данных, указывающий вид, в котором данные будут отправлены. Таких методов HTML поддерживает два:

1. Метод GET формирует из введенных посетителем данных набор пар вида <имя элемента управления>=<введенные в него данные>.

   Эти пары добавляются справа к интернет-адресу серверного приложения, отделяясь от него символом ? (вопросительный знак); сами пары разделяются символами & (амперсанд). Полученный таким образом интернет-адрес отправляется Web-серверу, который извлекает из него интернет-адрес серверного приложения и сами данные.
2. Метод POST также формирует из введенных данных пары вида <имя элемента управления>=<введенные в него данные>. Но отправляет он их не в составе интернет-адреса, а вслед за ним, в качестве дополнительных данных.

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

<form>

Тег <form> определяет форму HTML страницы.

Когда форма отправляется на сервер, управление данными передается программе, заданной атрибутом action тега <form>. Предварительно браузер подготавливает информацию в виде пары "имя=значение", где имя определяется атрибутом name тега <input>, а значение введено пользователем или установлено в поле формы по умолчанию.

Внутрь контейнера <form> помещаются другие теги, при этом сама форма никак не отображается на веб-странице, видны только ее элементы и результаты вложенных тегов.

Оформляется тег следующим образом:

<form>
.........
</form>

К атрибутам <form> относятся:

• accept-charset – определяет кодировку, в которой сервер может принимать и обрабатывать данные;
• action - определяет адрес программы или документа, который обрабатывает данные формы;
• autocomplete – включает автозаполнение полей формы;
• enctype – определяет способ кодирования данных формы. Может принимать следующие значения:
  • application/x-www-form-urlencoded – вместо пробелов ставится +, символы вроде русских букв кодируются их шестнадцатеричными значениями;
  • multipart/form-data – данные не кодируются;
  • text/plain – пробелы заменяются знаком +, буквы и другие символы не кодируются.
• method – метод протокола HTTP (GET или POST);
• name – определяет имя формы;
• novalidate – отменяет встроенную проверку данных формы на корректность ввода;
• target –задает имя окна или фрейма, куда обработчик будет загружать возвращаемый результат.