Автор статьи | Псевдоним: AMERICAN | E-Mail: lelikcrap@yahoo.com | |
Рассказать о формах в книге, посвященной HTML, достаточно трудно. Причина очень простая: создать форму гораздо проще, чем ту "точку внешнего мира", в которую форма будет посылать информацию. В качестве такой "точки" в большинстве случаев выступает программа, написанная на Перл или Си. Программы, обрабатывающие данные, переданные формами, часто называют CGI-скриптами. Сокращение CGI (Common Gateways Interface) означает "общепринятый интерфейс шлюзов". Написание CGI-скриптов в большинстве случаев требует хорошего знания соответствующего языка программирования и возможностей операционной системы Unix. В последнее время определенное распространение получил язык Perl, инструкции которого можно встраивать прямо в HTML-документы (документы при этом сохраняются в виде файлов с расширением *.pl ). Формы передают информацию программам-обработчикам в виде пар: Имена переменных следует задавать латинскими буквами. Значения переменных воспринимаются обработчиками как строки, даже если они содержат только цифры. <P> Как устроена форма </P> Форма открывается меткой <Form> и заканчивается меткой </Form>. HTML-документ может содержать в себе несколько форм, однако формы не должны находиться одна внутри другой. HTML-текст, включая метки, может размещаться внутри форм без ограничений. Метка <Form> может содержать три атрибута, один из которых является обязательным. Вот эти атрибуты:
Для того, чтобы запустить процесс передачи данных из формы обработчику, нужен какой-то орган управления. Создать такой орган управления очень просто: <Input Type="submit"> Встретив такую строчку внутри формы, браузер нарисует на экране кнопку с надписью Submit (читается "сабмит" с ударением на втором слоге, от английского "подавать"), при нажатии на которую все имеющиеся в форме данные будут переданы обработчику, определенному в метке <Form>. Надпись на кнопке можно задать такую, какая нравится, путем введения атрибута Value="[Надпись]" (читается "вэлью" с ударением на первом слоге, от английского "значение"), например: <Input Type="submit" Value="Поехали!"> Теперь мы знаем достаточно для того, чтобы написать простейшую форму. Она не будет собирать никаких данных, а просто вернет нас к тексту этой главы. <Html> <Head> <Title>Пример 11</Title> </Head> <Body> <H2>Простейшая форма </H2> <Form Action="form.htm"> <!--Это начало формы--> <Input Type="submit" Value="Назад..."> </Form> <!--Это конец формы--> </Body> </Html> Надпись, нанесенную на кнопку, можно при необходимости передать обработчику путем введения в определение кнопки атрибута Name="[имя]" (читается "нэйм", от английского "имя"), например: <Input Type="submit" Name="button" Value="Поехали!"> При нажатии на такую кнопку обработчик вместе со всеми остальными данными получит и переменную button со значением Поехали!. В форме может быть несколько кнопок типа submit с различными именами и/или значениями. Обработчик, таким образом, может действовать по-разному в зависимости от того, какую именно кнопку submit нажал пользователь. <P> Как форма собирает данные </P> Существуют и другие типы элементов <Input>. Каждый элемент <Input> должен включать атрибут Name="[имя]", определяющий имя элемента (и, соответственно, имя переменной, которая будет передана обработчику). Имя должно задаваться только латинскими буквами. Большинство элементов <Input> должны включать атрибут Value="[значение]", определяющий значение, которое будет передано обработчику под этим именем. Для элементов <Input Type="text"> и <Input Type="password">, однако, этот атрибут не обязателен, поскольку значение соответствующей переменной может вводиться пользователем с клавиатуры. <P> Основные типы элементов <Input> </P>
Помимо элементов <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> в большинстве случаев показывается в виде выпадающего меню. Метка <Oplion> определяет элемент меню. Обязательный атрибут 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" Cols="50" Rows="5"> А здесь - Ваш адрес... </TextArea> Все атрибуты обязательны. Атрибут Name определяет имя, под которым содержимое окна будет передано обработчику (в примере - address). Атрибут Rows устанавливает высоту окна в строках (в примере - 5). Атрибут Cols устанавливает ширину окна в символах (в примере - 50). Текст, размещенный между метками <TextArea> и </TextArea>, представляет собой содержимое окна по умолчанию. Пользователь может его отредактировать или просто стереть. Важно знать, что русские буквы в окне <TextArea> при передаче обработчику могут быть конвертированы в соответствующие им символьные объекты. Пример: <Html> <Head> <Title>Пример 12</Title> </Head> <Body> <H2>Несколько более сложная форма </H2> <Form Action="/cgi-bin/form.pl" Method="post"> <H3>Расскажите немного о себе...</H3> Ваше имя: <Input Type="text" Name="fn" Size="40"> <Br> Ваша фамилия: <Input Type="text" Name="ln" Size="40"> <Br> Пол: <Input Type="radio" Name="gender" Value="male" checked> мужской <Input Type="radio" Name="gender" Value="female"> женский <Br> Возраст: <Input Type="text" Name="age' Size="5"> лет <Br> <Input Type="submit" Value="Запустить обработчик"> </Form> </Body> </Html> Заполняйте форму, жмите на кнопку и смотрите, что будет... <P> Как отправить форму почтой </P> Все это прекрасно, скажут скептики, но на кой черт нужны формы людям, которым их нечем обработать? Отчасти это верно, но только отчасти. HTML предоставляет в Ваше распоряжение довольно мощный механизм пересылки содержимого форм по электронной почте. Вот как это выглядит на практике. Допустим, что мы слегка изменили Пример. Вместо строки <Form Action="http://localhost/cgi-bin/form.pl" Method="post> мы ввели строку <Form Action="mailto:user@mail.ru" Enctype="text/plain"> Обратите внимание, что мы изменили алгоритм кодирования на text/plain, то есть фактически выключили кодирование вообще. Предположим теперь, что пользователь указал, имя Иван, фамилию Петров, мужской пол и возраст 22 года. Теперь вопрос: что произойдет, если пользователь нажмет на кнопку Запустить обработчик? Ответ прост. На адрес user@mail.ru электронной почтой автоматически будет отправлено сообщение следующего содержания: К сожалению, не все пользователи смогут воспользоваться такой формой. Дело в том, что всю работу по составлению сообщения и запуску почтовой программы для его отправки фактически берет на себя браузер пользователя. Это значит, что конфигурация доступа пользователя к Интернет должна обеспечивать одновременное функционирование протокола передачи гипертекстов и протокола доставки исходящей почты. Такое возможно не всегда. Тем не менее, даже если это невозможно, ничего смертельного не случится. Браузер просто выдаст сообщение об ошибке. | ||