6. Использование формы для создания интерактивности на web-странице

Каждому пользователю знакомы многочисленные элементы управления (кнопки, списки, текстовые поля, флажки, переключатели и т. д.), которые встречаются в диалоговых окнах и окнах современных приложений. На web-страницах также можно размещать подобные элементы. Объединение логически связанных элементов управления в HTML-документе называется формой.

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

6.1. Задание формы

В HTML для создания формы применяется контейнер <FORM> </FORM>, который может размещаться в любом месте основной части документа. Документ может содержать несколько форм, причем каждой форме должна соответствовать своя пара тегов <FORM> </FORM>. Общая схема применения контейнера следующая:

<FORM NAME="имя_формы" ACTION="URL" METHOD="метод"

ENCTYPE="тип_кодировки">

. . . .

</FORM>

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

Имена, заданные атрибутом NAME, должны быть разными внутри одной формы, но могут совпадать с именами полей других форм. Можно имя форме и не присваивать, однако оно необходимо, чтобы формой можно было манипулировать из сценария (CGI-сценарий – программа обработки данных формы на сервере). Стандарт HTML 4 рекомендует вместо NAME использовать атрибут ID, а лучше всего пользоваться двумя атрибутами – NAME и ID, присваивая им одинаковые имена для поддержки наибольшим числом браузеров.

<FORM NAME="anketa" ID="anketa">

ACTION – определяет адрес (URL), который примет и обработает данные формы. Если этот атрибут не определен, данные отправляются по адресу страницы, на которой помещена форма.

<FORM ACTION="http://www.earthwed.com/cgi-bin/s97r">

означает, что браузер установит связь с сервером www.earthwed.com и данные, записанные в форму, передаст для обработки в приложение s97r, размещенное в папке cgi-bin. Если в качестве значения атрибута ACTION указать обращение к электронной почте.

ACTION="mailto:bap@mail.ru"

Браузер автоматически отправит результаты, введенные в форму, по указанному адресу.

METHOD – указывает форме, как послать информацию соответствующей программе обработки (скрипту). Существуют два способа передачи информации: get и post.

Способ get наиболее простой, он применяется по умолчанию и осуществляет передачу данных в один этап. Этот способ оптимален в случае, когда для обработки формы не требуется какого-либо дополнительного внешнего процесса. Информация формы посылается вместе с URL.

Способ post используется, когда нужно передать большие объемы информации. Передача происходит как минимум в два этапа отдельно от URL.

<FORM METHOD="post" ACTION="http://www.earthwed.com/cgi-bin

/comment_script">

В данном примере заполненная форма способом post отправляется для обработки скриптом comment_script, расположенным в каталоге cgi-bin сервера.

ENCTYPE предназначен для определения типа данных при кодировании информации, введенной пользователем, и последующей ее передачи на web-сервер. Возможными значениями параметра могут быть: applicatiom/x-www-form-urlencoded (используется по умолчанию и передает помимо текста графику и запакованные файлы), text-plain (более подходит, когда используется URL mailto в атрибуте ACTION), multipart/form-data (подходит при отправке файлов).

<FORM ENCTYPE="multipart/form-data" METHOD="post"

ACTION="http://www.earthwed.com/cgi-bin/comment_script">

В этом примере форма отправляет содержимое файла для обработки скриптом comment_script, расположенным в каталоге cgi-bin сервера, используется способ post.