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

Форма (формуляр) в HTML-документе определяется в виде блока, обрамленного открывающим и завершающим тэгами <form> и </form>, между которыми располагаются тэги, задающие те или иные компоненты формы, а также играющие роль подсказок текстовые строки и ссылки (<IMG SRC. . .>) на графические файлы. Кроме того, в составе тэга <form> записываются параметры, определяющие способ и характеристики обработки заключающейся в форме информации, в частности, способ пересылки ее на сервер и кодирования данных в процессе этой пересылки:

• ACTION — определяет адрес URL или тип объекта, на который возлагается обработка (или передача) содержащейся в форме информации. Таким объектом может быть CGI-программа, скрипт или почтовый клиент (в последнем случае предполагается, что данные формы лишь пересылаются по заданному адресу электронной почты, а обработка этих данных производится автором сайта вручную; учитывая сложности разработки и размещения на общедоступных серверах CGI- и ISAPI-приложений, использование в качестве значения данного параметра адреса e-mail (в виде mailto: [адрес]) представляет собой наиболее распространенный вариант, особенно когда речь идет о простейших формах типа откликов посетителей сайта о его качестве);

• ENCTYPE — указывает способ кодирования информации при ее пересылке на сервер или указанный адрес e-mail: значение application/x-www-form-urlencoded пересылает всю информацию (возвращаемые значения для всех компонентов формы) единым массивом и при этом преобразует пробелы в символы “+”, а специальные символы и русские буквы – в пары символов, обозначающие шестнадцатеричный код ASCII и предваряемые знаком “%” (данный способ кодирования используется по умолчанию и предпочтительнее при реализации обработки данных с помощью CGI- или ISАРI-приложения), значение же multipart/form-data предписывает пересылать каждое возвращаемое значение элемента формы в отдельном MIME-совместимом блоке. Кроме того, возможен и упрощенный способ кодирования, определяемый значением text/plain, используемый при пересылке данных по электронной почте (METHOD-"POST", см. ниже) и предполагающий пересылку никак не закодированной информации. Работа с этим форматом аналогична описываемой для значения multipart/form-data, а потому освоить его можно самостоятельно;

• method — способ передачи данных обработчику: get – формируется типовое обращение к CGI-приложению, включающее в себя его адрес (значение параметра action), символ “?” (признак, что далее следуют передаваемые CGI-программе значения) и сами данные (возвращаемые значения для каждого из элементов формы); post — браузер сначала устанавливает связь с сервером, а затем, получив подтверждение от CGI-приложения, передает ей собственно данные. При использовании в качестве обработчика адресации к почтовому ящику e-mail используется только значение post.

<FORM ACTION="mailto:user@domain.ru" ENCTYPE=multipart/form-data METHOD=post>

<FORM ACTION="mailto:user@domain.ru" ENCTYPE=application/x-www-form-urlencoded METHOD=post>

В этом случае, когда пользователь выполняет действие, приводящее к отправке заполненной формы (щелчок мышью на соответствующей кнопке), на его локальной ПЭВМ активизируется почтовый клиент* и автоматически отправляет (или подготавливает к отправке, помещая в папку Исходящие) письмо, содержащее в поле Кому указанный в параметре action адрес e-mail, к которому в качестве аттачмента присоединен файл данных формы. Так, при работе с браузером Microsoft Internet Explorer пристыкованный к письму файл носит имя postdata. Следует заметить, что при описываемом способе пересылки данных формы отправляемое по указанному в тэге <form> электронному адресу письмо, как правило, содержит в себе адрес отправителя (в поле От кого), делая его известным автору сайта, даже если заполняющий размещенную на нем форму пользователь не указывал свой адрес e-mail в явном виде.

Каждому элементу формы соответствует тэг <input>, параметр type которого указывает тип данного элемента, контейнер <textarea> </textarea> (для многострочного текстового окна) или контейнер <SELECT>...</SELECT> (для раскрывающегося списка). Рассмотрим подробнее каждый из возможных элементов интерфейса с его параметрами.

• size— ширина поля (в символах);

• MAXLENGHT — максимально допустимое количество вводимых символов;

Пример:

<FORM ACTION="mailto:user@domain.ru">

<INPUT TYPE=text NAME==MyFam SIZE=20 MAXLENGHT=40 VALUE="Введите фамилию">

</FORM>

Поле ввода пароля (INPUT TYPE=password)

Прямоугольное однострочное текстовое поле, отличающееся от уже рассмотренного только тем, что вводимый текст отображается в нем только как соответствующее количество “звездочек” (символов “*”). Параметры: те же, что и для текстового поля (TYPE=text).

Пример:

<FORM ACTION="mailto:user@doinain.ru">

<INPUT TYPE=password NAME=MyPass SISE=20 MAXLENGHT=40 VALUE="Пароль">

</FORM>

Прямоугольное текстовое поле с заданными шириной и высотой; при необходимости автоматически генерируется вертикальная линейка прокрутки содержимого. В HTML кодируется при помощи контейнера <textarea>…</textarea>. Параметры:

• NAME — имя области;

• WRAP – управление автоматическим переносом строк внутри окна и при передаче введенного текста на сервер: off — без переноса, physical — автоматический перенос с вставкой в соответствующие места текста символов перехода на новую строку, virtual — автоматический перенос строк без добавления символов перехода на новую строку (т. е. на сервер весь текст передается как одна строка). Текст, который должен быть изначально выведен в данной области, нужно ввести между тэгами <TEXTAREA> и </TEXTAREA>.

<FORM ACTION="mailto:user@domain.ru">

<TEXTAREA NAME=MyFam COLS=20 ROWS=7 WRAP=virtual>

</FORM>

Служат для “бинарного” ответа пользователя (по типу “Да”-“Нет”) либо для предоставления возможности произвольного выбора из нескольких представленных на странице опций (в последнем случае флажки, как правило, объединяются в группу, а информация о том, какие из них помечены, предназначается для анализа расположенной на сервере CGI-программой с целью включения или исключения соответствующей информации из генерируемого результирующего HTML-документа). Параметры:

• name — имя флажка (при объединении нескольких флажков в группу всем им дается одно и то же имя);

• value — записанная в кавычках произвольная комбинация букв и цифр, передаваемая на сервер, если данный флажок будет помечен пользователем;

• checked — при наличии данного параметра соответствующий флажок изначально будет выводиться как помеченный.

<FORM ACTION="mailto:user@domain.ru"> Что будете ловить?<BR>

<INPUT TYPE=checkbox NAME=Fishing VALUE="Kapacь">Kapacь<BR>

<INPUT TYPE-checkbox NAME=Fishing VALUE="Щука">Щука<ВК>

<INPUT TYPE=checkbox NAME=Fishing VALUE ="com">com<br>

<INPUT TYPE=checkbox NAME=ALL VALUE="Любая рыба" CHECKED>

</FORM>

• VALUE — записанная в кавычках произвольная комбинация букв и цифр, передаваемая на сервер, если данная радиокнопка будет помечена пользователем;

• CHECKED — при наличии данного параметра соответствующая радиокнопка изначально будет выводиться как помеченная. Параметр checked может быть записан только для одной радиокнопки в данной группе (для ранее указанных пометка снимается); этот параметр может быть не указан вовсе, тогда ни одна радиокнопка не будет помечена, пока пользователь не щелкнет мышью на какой-либо из них.

Пример:

<FORM ACTION= "mailto:user@domain.ru">Что будете ловить?<ВР>

<INPUT TYPE=radio NAME=Fishing VALUE="Kapacь" CHECKED>Kapacь<BR>

<INPUT TYPE=radio NAME=Fishing VALUE="Щука">Щука<ВР>

<INPUT TYPE=radio NAME=Fishing VALUE="com">com<br>

<INPUT TYPF=radio NAME=ALL VALUE="Любая рыба">Все что угодно, только не драные ботинки:)<ВR>

</FORM>

Предназначаются как для предоставления пользователю возможности выбора одной или нескольких опций, так и для использования в качестве своеобразного меню, содержащего названия подчиненных страниц или сторонних сайтов. В HTML кодируется при помощи контейнера < SELECT> … </SELECT>.

• name — имя списка;

• MULTIPLE — разрешение помечать (при одновременно нажатых клавишах Ctrl или Shift) сразу несколько пунктов списка.

Если задан параметр MULTIPLE и/или значение параметра SIZE больше 1, то список выводится развернутым (тогда значение SIZE определяет количество одновременно видимых на экране пунктов списка, для просмотра остальных используется линейка прокрутки). В противном случае (при отсутствии параметра MULTIPLE и SIZE=1) выводится список, раскрывающийся щелчком мыши на расположенной справа кнопке с изображением повернутого вершиной вниз треугольника.

Значения отдельных пунктов списка определяются при помощи тэгов <option>, каждый из которых определяет один пункт. Параметры тэга <option>:

• value — записанная в кавычках произвольная комбинация букв и цифр, передаваемая на сервер; при отсутствии данного параметра на сервер передается название выбранного пункта списка;

• selected —определяет данный пункт как помеченный по умолчанию (для раскрывающегося списка, т. е. при SIZE=1 и отсутствии параметра MULTIPLE, параметр selected может быть присвоен только одному пункту; при отсутствии в таком списке параметра SELECTED изначально выбранным (отображаемым) по умолчанию является первый пункт списка).

Название пункта записывается после тэга <option>.

<FORM ACTION="mailto:user@domain.ru">Назовите Ваш любимый браузер<BR>

<SELECT NAME=Browser SIZE=1>

<OPTION VALUE="">Выберите название

<OPTION VALUE=IE>lnternet Explorer

<OPTION VALUE=NN>Netscape Navigator

<OPTION VALUE=NC>Netscape Communicator

<OPTION VALUE=MZ>Mosaic

</SELECT>

<BR><BR>

<SELECT NAME=Sites SIZE=3 MULTIPLE>

<OPTION VALUE=Yahoo SELECTED>Yahoo

<OPTION VALUE=AItavista SELECTED>Altavista

<OPTION VALUE==Webcrawler>Webcrawler

<OPTION VALUE=Lycos>Lycos

<OPTION VALUE=Yandex>Yandex

<OPTION VALUE=Aport SELECTED>Aport

</SELECT> <BR>

<INPUT TYPE=checkbox NAME=Not VALUE="Ни один"> Ни один из перечисленных <BR> </FORM>

• maxlenght — максимально допустимое количество символов имени файла (вместе с путем).

Пример:

<FORM ACTION="mailto:user@domain.ru">

<INPUT TYPE=file NAME=MyFile SIZE=20 MAXLENGHT=40>

</FORM>

Параметры: те же, что и для однострочного текстового поля (TYPE=text).

<FORM ACTION="mailto:user@domain.ru">

<INPUT TYPE=hidden NAME=Comment SIZE=20 MAXLENGHT=40 VALUE="Вспомогательная информация">

</FORM>

1. Кнопка “Очистка формы” (INPUT TYPE=reset). Щелчок мышью на этой кнопке очищает форму (т. е. приводит ее к изначальному виду, в том числе восстанавливая изначальные значения в текстовых полях и изначальную пометку флажков и радиокнопок).

• value — текстовая строка надписи на кнопке (при отсутствии данного параметра выводится стандартная надпись Сброс или Reset).

2. Кнопка “Отправка формы” (INPUT TYPE=submit). Щелчок мышью на данной кнопке вызывает отправку информации формы на сервер (в соответствии с указанным в тэге <FORM> методом обработки).

• VALUE — текстовая строка надписи на кнопке (при отсутствии данного параметра выводится стандартная надпись Подача запроса или Submit).

3. Пользовательские командные кнопки стандартного вида (INPUT TYPE=button).

Кнопка, вид и функционирование которой является типовым для Windows, а назначение целиком определяется алгоритмом работы CGI-программы или скрипта, куда передается имя кнопки (NAME). Эти кнопки обычно используются также совместно со скриптом.

• NAME — имя кнопки;

• VALUE — текстовая строка надписи на кнопке.

4. Графические командные кнопки (INPUT TYPE=image). По назначению такие кнопки аналогичны пользовательским стандартного вида, но здесь в качестве кнопки используется произвольное изображение, хранящееся в отдельном графическом файле. Фактически это рисунок-гиперссылка, “возведенная в ранг” кнопки. (Для графической кнопки на сервер, кроме ее имени, дополнительно передается информация о координатах курсора мыши в момент нажатия.)

• NAME — имя кнопки;

• border — толщина рамки вокруг кнопки (0 — отключение рамки), необязательный параметр;

• src— имя (если требуется, путь и/или адрес URL) графического файла с изображением кнопки;

• VALUE — текстовая строка.

Пример:

<FORM ACTION="mailto:user@domain.ru">

Ваша фамилия: &nbsp; &nbsp; &nbsp;

<INPUT TYPE=text NAME=MyFam SIZE=20 MAXLENGHT=40 VALUE=""> <BR><BR>Ваш возраст :<BR>

<INPUT TYPE-radio NAME=age VALUE="Yang" CHECKED>10-16

&nbsp; &nbsp; &nbsp;

<INPUT TYPE=radio NAME=age VALUE="Student">17-25

&nbsp; &nbsp; &nbsp;

<INPUT TYPE=radio NAME=age VALUE="Worker">26-60

&nbsp; &nbsp; &nbsp;

<INPUT TYPE=radio NAME=age VALUE="Old">61-99

&nbsp; &nbsp; &nbsp; <BR><BR>

<INPUT TYPE=reset NAME=Resetter> &nbsp; &nbsp; &nbsp;

<INPUT TYPE=reset NAME=Resetterl VALUE="Очистка"> <BR><BR>

<INPUT TYPE=submit NAME=Submitter> &nbsp; &nbsp; &nbsp;

<INPUT TYPE=submit NAME=Submitterl VALUE="Отправка"> <BR><BR>

<INPUT TYPE=button NAME=Buttl VALUE="Пользовательская кнопка"> <BR><BR>

<INPUT TYPE=image NAME=Butt2 SRC=Butt1.gif ALIGN=left BORDER=1 VALUE="Графическая кнопка">

</FORM>

Как правило, для создания форм используются различные редакторы HTML (в том числе Microsoft Word 97), а сам этот процесс в режиме WYSIWYG сводится выбору из меню или кнопочной панели инструментов тех или иных желаемых элементов интерфейса и их размещению вместе с необходимыми текстовыми и графическими подсказками на будущей странице (обычно при помощи таблицы с невидимой разлиновкой). Однако при работе с редактором Word 97 for Windows следует иметь в виду, что в нем (по всей вероятности из-за ошибок, допущенных разработчиками данного офисного пакета) интерпретация и отображение созданных форм реализованы некорректно, в частности, для HTML-документа после его загрузки с диска или просмотра в виде HTML-текста (команда Источник HTML в меню Вид) радиокнопки, флажки и кнопки (submit и reset), почему-то превращаются в обычные однострочные текстовые поля, причем, если для флажков и радиокнопок их исходный HTML-код остается правильным (могут быть утрачены только параметры CHECKED), то при подобном “преобразовании” кнопки submit утрачиваются первоначально заданные значения параметров action, enctype и method. учитывая эту ошибку, а также отмеченные нами ранее неудобства, связанные с генерацией тэгов <font face>, можно рекомендовать Word 97 лишь как инструмент для создания предварительного варианта формы с последующим его просмотром и редактированием вручную.

Итак, создавать интерактивные формы мы уже умеем. Осталось лишь получить и обработать введенные тем или иным посетителем нашего сайта данные. Если предполагается немедленная реакция сервера на выбранные пользователем опции, то здесь, конечно, без написания обрабатывающей программы не обойтись. Но если мы хотим, например, использовать форму для предоставления посетителю нашего сайта возможности выразить свое мнение о нашем творении, то вполне можно обойтись без CGI. Достаточно лишь, как это сделано в приведенном выше примере, записать в составе открывающего тэга <FORM> в качестве значения параметра ACTION свой адрес электронной почты, а для параметра METHOD указать значение post, и при отправке такой формы вся введенная пользователем информация будет получена нами в качестве обычного письма e-inail с пристыкованным файлом (проверено для браузера Microsoft Internet Explorer и почтовой программы Microsoft Outlook Express). Правда, к сожалению, при подобном способе пересылки заполненных форм не удается использовать в них такой элемент как пересылка файла (INPUT TYPE=fiie).