Форма — это инструмент, с помощью которого HTML-документ может послать некоторую информацию в некоторую заранее определенную точку внешнего мира, где информация будет некоторым образом обработана.
Рассказать о формах в книге, посвященной HTML, достаточно трудно. Причина очень простая: создать форму гораздо проще, чем ту "точку внешнего мира", в которую форма будет посылать информацию. В качестве такой "точки" в большинстве случаев выступает программа, написанная на Перл или Си. Программы, обрабатывающие данные, переданные формами, часто называют CGI-скриптами. Сокращение CGI (Common Gateways Interface) означает "общепринятый интерфейс шлюзов". Написание CGI-скриптов в большинстве случаев требует хорошего знания соответствующего языка программирования и возможностей операционной системы Unix.
В последнее время определенное распространение получил язык PHP/FI, инструкции которого можно встраивать прямо в HTML-документы (документы при этом сохраняются в виде файлов с расширением *.pht или *.php).
Формы передают информацию программам-обработчикам в виде пар [имя переменной]=[значение переменной]. Имена переменных следует задавать латинскими буквами. Значения переменных воспринимаются обработчиками как строки, даже если они содержат только цифры.
Как устроена формаФорма открывается меткой <FORM> и заканчивается меткой </FORM>. HTML-документ может содержать в себе несколько форм, однако формы не должны находиться одна внутри другой. HTML-текст, включая метки, может размещаться внутри форм без ограничений.
Метка <FORM> может содержать три атрибута, один из которых является обязательным. Вот эти атрибуты:
Для того, чтобы запустить процесс передачи данных из формы обработчику, нужен какой-то орган управления. Создать такой орган управления очень просто:
<INPUT TYPE=submit>
Встретив такую строчку внутри формы, браузер нарисует на экране кнопку с надписью Submit (читается "сабмит" с ударением на втором слоге, от английского "подавать"), при нажатии на которую все имеющиеся в форме данные будут переданы обработчику, определенному в метке <FORM>.
Надпись на кнопке можно задать такую, какая нравится, путем введения атрибута VALUE="[Надпись]" (читается "вэлью" с ударением на первом слоге, от английского "значение"), например:
<INPUT TYPE=submit VALUE="Поехали!">
Теперь мы знаем достаточно для того, чтобы написать простейшую форму (пример 11). Она не будет собирать никаких данных, а просто вернет нас к тексту этой главы.
<HTML> <HEAD> <TITLE>Пример 11</TITLE> </HEAD> <H1>Простейшая форма </H1> <FORM ACTION="pr0008.html"> <!--Это начало формы--> <INPUT TYPE=submit VALUE="Назад, к главе 8..."> </FORM> <!--Это конец формы--> </BODY> </HTML>
Надпись, нанесенную на кнопку, можно при необходимости передать обработчику путем введения в определение кнопки атрибута NAME=[имя] (читается "нэйм", от английского "имя"), например:
<INPUT TYPE=submit NAME=button VALUE="Поехали!">
При нажатии на такую кнопку обработчик вместе со всеми остальными данными получит и переменную button со значением Поехали!.
В форме может быть несколько кнопок типа submit с различными именами и/или значениями. Обработчик, таким образом, может действовать по-разному в зависимости от того, какую именно кнопку submit нажал пользователь.
Как форма собирает данныеСуществуют и другие типы элементов <INPUT>. Каждый элемент <INPUT> должен включать атрибут NAME=[имя], определяющий имя элемента (и, соответственно, имя переменной, которая будет передана обработчику). Имя должно задаваться только латинскими буквами. Большинство элементов <INPUT> должны включать атрибут VALUE="[значение]", определяющий значение, которое будет передано обработчику под этим именем. Для элементов <INPUT TYPE=text> и <INPUT TYPE=password>, однако, этот атрибут не обязателен, поскольку значение соответствующей переменной может вводиться пользователем с клавиатуры.
Основные типы элементов <INPUT>:
Помимо элементов <INPUT>, формы могут содержать меню <SELECT> и поля для ввода текста <TEXTAREA>.
Меню <SELECT> из n элементов выглядит примерно так:
<SELECT NAME="[имя]"> <OPTION VALUE="[значение 1]">[текст 1] <OPTION VALUE="[значение 2]">[текст 2] ... <OPTION VALUE="[значение n]">[текст n] </SELECT>
Как Вы видите, меню начинается с метки <SELECT> и заканчивается меткой </SELECT>. Метка <SELECT> содержит обязательный атрибут NAME, определяющий имя переменной, которую генерирует меню.
Метка <SELECT> может также содержать атрибут MULTIPLE, присутствие которого показывает, что из меню можно выбрать несколько элементов. Большинство браузеров показывают меню <SELECT MULTIPLE> в виде окна, в котором находятся элементы меню (высоту окна в строках можно задать атрибутом SIZE=[число]). Меню <SELECT> в большинстве случаев показывается в виде выпадающего меню.
Метка <OPTION> определяет элемент меню. Обязательный атрибут VALUE устанавливает значение, которое будет передано обработчику, если выбран этот элемент меню. Метка <OPTION> может включать атрибут checked, показывающий, что данный элемент отмечен по умолчанию.
Разберем небольшой пример.
<SELECT NAME="selection"> <OPTION VALUE="option1" checked>Вариант 1 <OPTION VALUE="option2">Вариант 2 <OPTION VALUE="option3">Вариант 3 </SELECT>
Такой фрагмент определяет меню из трех элементов: Вариант 1, Вариант 2 и Вариант 3. По умолчанию выбран элемент Вариант 1. Обработчику будет передана переменная selection значение которой может быть option1 (по умолчанию), option2 или option3.
После всего, что мы уже узнали, элемент <TEXTAREA> может показаться совсем простым. Например:
<TEXTAREA NAME=address ROWS=5 COLS=50> А здесь - Ваш адрес... </TEXTAREA>
Все атрибуты обязательны. Атрибут NAME определяет имя, под которым содержимое окна будет передано обработчику (в примере — address). Атрибут ROWS устанавливает высоту окна в строках (в примере — 5). Атрибут COLS устанавливает ширину окна в символах (в примере — 50).
Текст, размещенный между метками <TEXTAREA> и </TEXTAREA>, представляет собой содержимое окна по умолчанию. Пользователь может его отредактировать или просто стереть.
Важно знать, что русские буквы в окне <TEXTAREA> при передаче обработчику могут быть конвертированы в соответствующие им символьные объекты.
ПримерДля демонстрации использования форм я написал небольшую программу на PHP, которая находится по адресу:
http://206.31.82.215/hp/nc/fd-win.pht
Исходные данные в эту программу передаст форма, описанная в примере 12:
<HTML> <HEAD> <TITLE>Пример 12</TITLE> </HEAD> <H1>Несколько более сложная форма </H1> <FORM ACTION="http://206.31.82.215/hp/nc/fd-win.pht" METHOD=post> <H2>Расскажите немного о себе...</H2> <P>Указывать подлинные данные совсем не обязательно. Для целей демонстрации вполне подойдут и вымышленные. </P> <P>Имя: <INPUT TYPE=text SIZE=40 NAME=fn><BR> Фамилия: <INPUT TYPE=text SIZE=40 NAME=ln><BR> Пол: <INPUT TYPE=radio NAME=gender VALUE="male" checked>мужской <INPUT TYPE=radio NAME=gender VALUE="female">женский<BR> Возраст: <INPUT TYPE=text SIZE=5 NAME=age> лет<BR> <INPUT TYPE=submit VALUE="Запустить обработчик"></P> </FORM> </BODY> </HTML>
Заполняйте форму, жмите на кнопку и смотрите, что будет...
Маленькая хитрость,Все это прекрасно, скажут скептики, но на кой ляд нужны формы людям, которым их нечем обработать? Отчасти это верно, но только отчасти.
HTML предоставляет в Ваше распоряжение довольно мощный механизм пересылки содержимого форм по электронной почте. Вот как это выглядит на практике.
Допустим, что мы слегка изменили Пример 12. Вместо строки
<FORM ACTION="http://206.31.82.215/hp/nc/fd-win.pht" METHOD=post>
мы ввели строку
<FORM ACTION="mailto:user@mail.box" ENCTYPE=text/plain>
Обратите внимание, что мы изменили алгоритм кодирования на text/plain, то есть фактически выключили кодирование вообще.
Предположим теперь, что пользователь указал, имя Иван, фамилию Петров, мужской пол и возраст 22 года. Теперь вопрос: что произойдет, если пользователь нажмет на кнопку Запустить обработчик?
Ответ прост. На адрес user@mail.box электронной почтой автоматически будет отправлено сообщение следующего содержания:
fn=Иван ln=Петров gender=male age=22
К сожалению, не все пользователи смогут воспользоваться такой формой. Дело в том, что всю работу по составлению сообщения и запуску почтовой программы для его отправки фактически берет на себя браузер пользователя. Это значит, что конфигурация доступа пользователя к Интернет должна обеспечивать одновременное функционирование протокола передачи гипертекстов и протокола доставки исходящей почты. Такое возможно не всегда. Тем не менее, даже если это невозможно, ничего смертельного не случится. Браузер просто выдаст сообщение об ошибке.