Лабораторная работа № 3
Тема: Создание и редактирование заполняемых форм(Fill-out Forms, Fill-in Forms) в HTML
Цель работы:
Приобретение основных навыков по созданию и редактированию форм в HTML.
Основные положения
Одна из основных красот Web — интерактивные формы. Они позволяют читателям Web-страниц легко общаться с их владельцами. Всевозможные формы и бланки, в которые что-то надо вписать, какие-то пункты отметить крестиком, а что-то зачеркнуть ("мужской, русский, нет, не участвовал, не был, не имеет..."), давно и прочно вошли в жизнь каждого человека, служа удобным инструментом быстрого сбора информации. Стандарт HTML предоставляет аналогичное "бумажному" прототипу средство запроса, называемое заполняемая форма (fill-out form или fill-in form).
Благодаря простоте использования тега <mailto:> и форм стал возможен двусторонний диалог между владельцами Web-узлов и их читателями. Пользуясь тегом <mailto:> и формами, читатели чувствуют себя, скорее, участниками ваших страниц, чем посетителями.
Следует однако иметь в виду, что многие старые броузеры не поддерживают тег <mailto:>. Но даже старые броузеры легко можно заставить работать, но сначала придется кое-что сделать на сервере.
Программа просмотра, выводя на экран документ, содержащий форму, дает читателю возможность заполнить ее, впечатывая текст в специальные поля, отмечая "щелчками" мыши "галочки" и выбирая нужные элементы из списков. После заполнения формы читатель нажимает экранную кнопку "Submit Query" ("послать запрос") - и программа просмотра высылает введенную информацию на указанный WWW-сервер, который передает запрос определенной программе, специально предназначенной для его обработки. Затем сервер, при необходимости, высылает программе просмотра ответ в виде заранее подготовленного или сгенерированного "на лету" документа. Описанный механизм обработки известен как Common Gateway Interface (CGI).
Программы для обработки CGI-запросов пишутся квалифицированными программистами, чаще всего на языках C или Perl. Установка этих программ на WWW-сервере осуществляется администратором. Вы, как автор WWW-страниц, можете узнать у администратора, какие программы обработки запросов установлены на вашем сервере, и как их использовать, а также можете попросить установить на сервере ту или иную необходимую вам программу. При необходимости, вы можете взять образец заполняемой формы, обработка которой осуществляется нужной программой, отредактировать эту форму в соответствии с вашими требованиями и использовать в своих WWW-страницах. Как мы увидим ниже, в некоторых случаях использование CGI при работе с формами не обязательно: введенная в форму информация может обрабатываться локально, без взаимодействия с сервером (например, при помощи JavaScript), а данные из нее высылаться по электронной почте.
Формы очень просто создавать, с ними легко обращаться. С помощью популярных программ для работы с HTML, всего лишь несколько раз щелкнув мышкой, можно быстро и эффективно сгенерировать даже довольно сложные формы. Такие вещи, как флажки, переключатели и выпадающие меню, делаются на удивление быстро.
В данной работе будет рассмотрено несколько простых приемов, с помощью которых можно создать полезные и эффективные формы.
Кроме того, будет рассмотрено, как заставить формы посылать информацию на ваш сервер, даже если броузер пользователя не поддерживает тег <mailto:>.
Описание формы на HTML открывает специальный флаг <FORM ...>, а закрывает - флаг </FORM>.
Атрибут NAME="..." присваивает форме символическое имя, используя которое можно на эту форму ссылаться в дальнейшем. Нашу форму мы, как видно из Примера №1, назвали simple_form.
Атрибут ACTION="..." задает URL программы обработки запроса; в нашем случае (Пример №1) это программа с именем post-query, расположенная в директории cgi-bin на WWW-сервере hoohoo.ncsa.uiuc.edu.
Атрибут METHOD="..." задает программе просмотра метод оформления запроса. Допустимы методы POST или GET, о которых мы поговорим несколько ниже.
Внутри формы разрешается располагать любой форматированный в соответствии с правилами HTML текст. Однако, главное, что можно располагать только внутри формы, - это описание элементов ввода, с помощью которых, собственно, читатель и сообщает запрашиваемую от него информацию.
В Примере №1 использовано шесть типов элементов ввода:
поле текстового ввода (text field),
раскрывающийся список (pull-down listbox),
"радиокнопка" (radio button),
"кнопка-флажок" (checkbox),
скрытый элемент (hidden)
экранная кнопка (button).
Поле текстового ввода описывается непарным флагом <INPUT TYPE="text" NAME="name_field" VALUE="">.
Атрибут TYPE="..." задает тип поля ввода (в данном случае - text).
Атрибут NAME="..." присваивает данному элементу ввода символическое имя (идентификатор).
Атрибут VALUE="..." указывает, какой текст появится в этом поле по умолчанию, то есть до того, как пользователь что-либо введет в это поле (the default text).
Непарные флаги
<INPUT TYPE="radio" NAME="sex" VALUE="male" CHECKED> и
<INPUT TYPE="radio" NAME="sex" VALUE="female">
описывают две радиокнопки. Отличительным свойством радиокнопок является то, что в любой момент в группе одноименных (то есть, имеющих одинаковые атрибуты NAME="...") радиокнопок, принадлежащих одной форме, только одна может быть включена. Включение любой другой радиокнопки (как правило, щелчком мыши на ней) вызывает автоматическое выключение предыдущей.
Атрибут CHECKED указывает радиокнопку, включенную по умолчанию. Очевидно, что радиокнопки необходимо использовать, когда один из предложенных вариантов ответа на вопрос исключает другие варианты.
Парный флаг <SELECT NAME="lang_menu"> ... </SELECT> задает поле ввода, предлагающее пользователю выбрать одну из предложенных возможностей. По выполняемой функции этот элемент аналогичен рассмотренному выше, но более удобен при выборе из большого числа альтернатив. В Примере №1 с его помощью создан раскрывающийся список, предлагающий пользователю выбор одной из четырех альтернатив, каждая из которых, как мы видим из примера, задана при помощи флага <OPTION>.
Атрибут SELECTED при этом указывает альтернативу, выбранную по умолчанию (the default option).
Непарный флаг
<INPUT TYPE="checkbox" NAME="read_english" VALUE="Yes" CHECKED>
описывает кнопку-флажок. Кнопки-флажки по свойствам похожи на радиокнопки, описанные выше, но, в отличие от последних, могут быть включены или выключены независимо от других одноименных кнопок-флажков.
Непарный флаг
<INPUT TYPE="hidden" NAME= "ID_field" VALUE="Form1">
описывает скрытый элемент, который программа просмотра на экран не выводит. В нашем примере этому элементу присвоено имя ID_field и значение Form1. Такой элемент может быть использован, например, для идентификации одинаковых форм, включенных в различные документы, чтобы программа обработки CGI-запроса могла определить, из какого именно документа был сделан запрос.
Непарный флаг <INPUT TYPE="reset"> описывает экранную кнопку, при "нажатии" на которую программа просмотра восстанавливает заданное по умолчанию состояние всех элементов ввода в пределах данной формы.
Непарный флаг <INPUT TYPE="submit"> описывает экранную кнопку, при "нажатии" на которую программа просмотра отправляет запрос на сервер.
Пример №1
<HTML>
<BODY>
<FORM NAME="simple_form"
ACTION="http://hoohoo.ncsa.uiuc.edu/cgi-bin/post-query" METHOD = "POST">
<UL>
<LI>Ваше имя:
<INPUT TYPE="text" NAME="name_field" VALUE=""></LI>
<LI>Пол: <INPUT TYPE="radio" NAME="sex" VALUE="male" CHECKED>Муж.
<INPUT TYPE="radio" NAME="sex" VALUE="female">Жен.</LI>
<LI>Ваш родной язык:
<SELECT NAME="lang_menu">
<OPTION SELECTED>Русский
<OPTION>Украинский
<OPTION>Белорусский
<OPTION>другой
</SELECT></LI>
<LI>Читаете по-английски
<INPUT TYPE="checkbox" NAME="read_english" VALUE="Yes" CHECKED></LI></UL>
<INPUT TYPE="hidden" NAME="ID_field" VALUE="Form1">
<INPUT TYPE="submit">
<INPUT TYPE="reset">
</FORM>
</BODY>
</HTML>
Рис 3.1 Результат просмотра на экране страници из Примера №1
Рассмотрим теперь как же происходит отправка запроса на сервер при "нажатии" кнопки "Submit". Для этого используют один из двух доступных методов: GET или POST; при этом требуемый метод указывается атрибутом METHOD="..." внутри флага
<FORM ...>.
1) METHOD="GET"
Содержимое элементов ввода собирается в запрос, который выглядит примерно так:
action?name=value&name=value&name=value
где action - это URL программы обработки запроса, указанной при помощи атрибута ACTION="..." внутри флага <FORM ...>. Каждая пара name=value указывает значение элемента ввода с именем name, - вот для чего было необходимо присваивать элементам ввода символические имена при помощи атрибута NAME="..."!
Возможные значения элементов ввода различаются для элементов разных видов. Для поля текстового ввода это, очевидно, введенный пользователем текст; для радиокнопок и кнопок-флажков - их значения, указанные атрибутом VALUE="...".
Строку запроса name=value&name=value&name=value..., а также и много другой служебной информации, WWW-сервер передает программе обработки запроса при помощи специально зарезервированных для этого переменных окружения операционной системы (environment variables).
2) METHOD="POST"
В отличие от метода GET, строка запроса посылается не как "хвост", добавленный к URL программы обработки и начинающийся со знака вопроса, а в виде отдельного блока данных, который WWW-сервер передает программе обработки через стандартное устройство ввода (stdin).
В большинстве случаев предпочтительнее использовать метод POST, поскольку при этом на длину строки запроса не накладывается ограничений.
Если у вас есть доступ к Internet и установлена программа просмотра, то вы можете проверить работу приведенного выше примера. В ответ на ваш запрос сервер (разумеется, если он в этот момент будет доступен) вышлет "декодированные" значения элементов ввода, например:
Query Results
You submitted the following name/value pairs:
name_field = Дима
sex = male
lang_menu = Русский
read_english = Yes
ID_field = Form1
Секрет:
Результаты запроса можно послать на желаемый адрес по электронной почте, даже не пользуясь услугами CGI! Для этого необходимо изменить атрибуты флага FORM следующим образом:
<FORM NAME="simple_form" ACTION="mailto:e_mail_address" ENCTYPE="text/plain">,
где e_mail_address - адрес электронной почты, на который следует выслать данные из формы. Советуем вам поэкспериментировать, используя свой собственный адрес электронной почты, чтобы не удивлять посторонних людей полученными от вас весьма странными письмами.
Как сделать так, чтобы ваша форма хорошо смотрелась
Создать форму легко, но можно провозиться несколько часов, пока вам удастся элегантно выстроить все ее элементы. Эта проблема не имеет простого решения. Один из способов свести все трудности к минимуму состоит в том, чтобы разместить области ввода и выпадающие меню в левой части страницы, а весь сопроводительный текст — справа. Поскольку ширину областей ввода можно задать с помощью атрибута SIZE= , вы по крайней мере выровняете строки слева, а текст справа будет невыровненным — как в большинстве документов. Такая форма выглядит несколько аккуратнее.
Не забудьте оставить промежуток между текстом и областью ввода формы, как показано на рис.3.2.
Рис 3.2. Области ввода выглядят аккуратнее, если их поместить слева от пояснительного текста
Код к рис. 3.2
<HTML>
<BODY>
<FORM> <CENTER><H1>Какая форма Вам больше нравится?</H1>
<TABLE>
<TR>
<TD>
Предыдущий <INPUT NAME=" Предыдущий " SIZE="15"><BR>
Следующий <INPUT NAME=" Следующий " SIZE="15"><BR>
Адрес <INPUT NAME="Адрес" SIZE="15"><BR>
Улица <INPUT NAME="Улица" SIZE="15"><BR>
Город <INPUT NAME="Город" SIZE="15"><BR>
ZIP <INPUT NAME="ZIP" SIZE="15"><BR></TD>
<TD><H3>или</H3></TD>
<TD>
<INPUT NAME=" Предыдущий " SIZE="15"> Предыдущий <BR>
<INPUT NAME=" Следующий " SIZE="15"> Следующий <BR>
<INPUT NAME=" Адрес " SIZE="15"> Адрес <BR>
<INPUT NAME=" Улица " SIZE="15"> Улица <BR>
<INPUT NAME=" Город " SIZE="15"> Город <BR>
<INPUT NAME="ZIP" SIZE="15"> ZIP</TD>
</TR>
</TABLE>
</PORM>
</CENTER>
</BODY>
</HTML>
Наверное, лучший способ сделать изящные и хорошо организованные формы — построить из их элементов таблицу. Тогда вы сможете разместить элементы формы произвольным образом, как видно из рис. 3.3. К сожалению, формы нельзя вкладывать друг в друга.
Рис. 3.3.
Код к рис. 3.3
<HTML>
<BODY>
<CENTER>
<H2>Sassy's Worldwide Dogbite Service, Inc.<BR>
"When We Bite 'em, They Stay Bit"<BR>
<l>No Extra Charge for Barking</l></H2>
</CENTER>
Mad at someone? Want revenge? Just plain ol' want to scare 'em? Even if they are faraway—even in another country—we can guarantee your satisfaction.Order up a dogbiting right here thanks to the amazing interactivity of the World WideWeb! Simply fill in the form below, including credit card information, and submit yourorder. Most orders filled within days! Do it today!
<HR NOSHADE>
<TABLE>
<TR>
<TD COLSPAN="3"><FORM><B>Simply tell us who to bite, where to find them,what particular part of their anatomy you would like the bite to involve, any specialinstructions, how you're going to pay, and your attorney's name and address.</B>
</TD>
</TR>
<TR VALIGN=TOP>
<TD>Who would you tike to have bitten?<BR>
<select name="who bitten?" >
<OPTION SELECTED>
<OPTION>A political pundit
<OPTION>An umpire
<OPTION>A heinous dictator
<OPTION>The postal carrier
<OPTION>A movie star
<OPTION>Other (type name below)
</SELECT> or<BR>
<INPUT NAME="name" SIZE="20"> Name<BR>
<INPUT NAME="Location of bitee" SIZE="15"> Location of bitee<BR>
<SELECT NAME="where bitten?">
<OPTION SELECTED>
<OPTION>leg
<OPTION>butt
<OPTION>foot
<OPTION>hand
<OPTION>anywhere
</SELECT> Part of body to be bitten
</td>
<td width="10%"></td>
<td>
<TEXTAREA ROWS=1 COLS=40 NAME="special instructions">Special Instructions:
</TEXTAREA><BR><BR>
<TEXTAREA ROWS=1 COLS=40 NAME=="tawyer">How can we contact your attorney?</TEXTAREA>
</TD>
</TR>
</TABLE>
<HR NOSHADE>
<FONT SIZE=4>Payment lnformation:</FONT>
<TABLE>
<TR VALIGN=TOP>
<TD width="35%">
<INPUT NAME="visa" TYPE="checkbox"> VISA<BR>
<INPUT NAME="discover" TYPE="checkbox"> DISCOVER<BR>
<INPUT NAME="mastercar(j" TYPE="checkbox"> MASTERCARD<BR>
<INPUT NAME="card number" SIZE="15"> Card Number<BR>
<INPUT NAME="expiration date" SIZE="12"> Expiration Date<BR>
<INPUT NAME="ovemight" TYPE="checkbox"> Overnight (add $12.00)<BR>
</TD>
<TD WIDTH="35%"></TD>
<TD>Call for International Rates.<BR>
South Dakota residents add 8.25% sales tax.<P>
<H2><INPUT TYPE=="SUBMIT" VALUE="Place Your Order''><INPUT TYPE="reset"
VALUE="Reset">
<l>0rder Today!</l></H2>
<H6><l>(Not all dogbite services are available in all areas—call for special pricing. Void where prohibited.)</l></H6>
</TD>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
В выпадающих меню задавайте по умолчанию пустое поле
Если вы собираетесь использовать полученную с помощью форм информацию для каких-то сравнений или статистических исследований, вы должны спроектировать свои формы так, чтобы собранная информация отражала истинную точку зрения ваших читателей. Неправильно построенные выпадающие меню могут дать искаженные результаты.
Всегда тщательно продумывайте пункт меню, задаваемый по умолчанию. Допустим, вы опрашиваете ваших читателей о том, какой породы у них собаки. Среди множества пунктов, в которых ваши читатели должны поставить галочку, выбрать вариант или вписать свой, у вас будет простой выпадающий список примерно с десятью породами собак, из которых пользователи будут выбирать. Если ваши читатели ленивы, спешат или ошиблись, они могут пропустить именно ту породу, которая им нужна, даже если они тщательно заполнили всю остальную форму. Поместив на своих страницах форму, изображенную на рис. 3.4, вы, возможно, получите весьма большое число респондентов, владеющих собаками породы “bluetick coonhound”. Это красивые животные но очень редкие.
Рис 3.4. Задав по умолчанию породу собак Вы можете получить искаженные результаты
Код к рис. 3.4
<HTML>
<BODY>
<CENTER><H1>What's your dog?</H1></CENTER>
<FORM METHOD="POST" ACTION="mailto: yourname@your.email.address">
Please select the type of dog you fancy.<BR>
<SELECT NAME="Dog type" SIZE="1">
<OPTION>Bluetick coonhound
<OPTION>Toy poodle
<OPTION>Australian shephard
<OPTION>Blue heeler
<OPTION>Pembroke welsh corgi
</SELECT>
<P>
<INPUT TYPE=”SUBMIT" VALUE="Submit">
<INPUT TYPE="RESET" VALUE="Reset">
</FORM>
</BODY>
</HTML>
Однако можно оставить первое окошко меню пустым или записать в нем “выбор не сделан”. В этом случае, если владельцы собак, отвечающие на ваши вопросы, ничего не выберут в выпадающем списке, ваши результаты будут ближе к реальным, см. рис. 3.5.
Рис. 3.5.
Код к рис. 3.5
<HTML>
<BODY>
<CENTER><H1>What's your dog?</H1></CENTER>
<FORM METHOD="POST" ACTION="mailto: yourname@your.email.address"> Please select the type of dog you fancy.<BR>
<SELECT NAME="Dog type" SIZE="1">
<OPTION>No Selection
<OPTION>Bluetick coonhound
<OPTION>Toy poodle
<OPTION>Australian shephard
<OPTION>Blue heeler
<OPTION>Pembroke welsh corgi
</SELECT>
<P>
<INPUT TYPE=”SUBMIT" VALUE="Submit">
<INPUT TYPE="RESET" VALUE="Reset">
</FORM>
</BODY>
</HTML>
Приведенный выше пример — это лишь один из многих способов сделать Web-опросы более точными.
Куда пересылать данные
В зависимости от ваших ресурсов имеется несколько возможностей. Вы должны передать полученные данные программе, поддерживающей Common Gateway Interface (CGI), находящейся где-нибудь в Web, причем необязательно на том же Web-сервере, что и форма. Таким образом, если вы не в состоянии запустить приложение CGI на своем узле, и ваш Web-сервер не имеет средств работы с формами, вы можете найти где-нибудь кого-нибудь, кто согласится производить для вас необходимую обработку. Это можно реализовать несколькими способами:
О воспользоваться сервисом обработки форм; О инсталлировать написанную кем-либо другим программу CGI; О создать собственную программу CGI.
Услуги по обработке форм
Самый простой путь - найти человека, будь то ваш собственный Web-провайдер или кто-либо еще в Интернет, кто выполнит для вас обработку форм. Возможно, вам придется платить за каждую обработанную форму, но вряд ли это будет очень дорого. Как только вы договорились о подобном обслуживании, вам остается только указать в атрибуте ACTION= соответствующий URL. После этого все данные, введенные пользователями в ваши формы, будут упакованы в электронное сообщение и отправлены вам.
Для каждой заполненной формы вы будете получать по одному сообщению примерно такого вида:
То: <you@someplace.com>
From: "Bubba's Form Hadlin' Service" <forms@bubba.com> Subject: You gotta form who bit=The mailman location of bitee=0n the front steps where bit=butt special instructions=Make him run a little first
Если вы используете несколько форм, желательно сортировать заполненные формы. Разумнее всего иметь в каждой форме скрытое поле имени, например "Formname", и значение, объясняющее вам, что это за форма. Некоторые обработчики форм могут искать имя специального поля, которое они помещают в тему (subject) посылаемого вам электронного сообщения. Получив письмо, удобно воспользоваться почтовым фильтром для автоматической сортировки сообщений. Можно применять автоматические фильтры, например procrnail или slocal для систем UNIX или Windows. Такой фильтр может не только рассортировать ваши сообщения, но еще и обработать их с помощью сценария. Затем сообщения сравниваются и помещаются в базу данных или используются для автоматической корректировки вашей Web-страницы.
Использование чужой программы CGI
В Web находится огромное количество программ для обработки форм, которые можно загрузить и установить на вашем узле. Вообще говоря, эти приложения делают то же самое, что и службы по обработке форм, с той разницей, что с программой вы можете делать, что хотите, и, что еще важнее, за это не придется платить. В главе 10 в качестве примера приводится минимальный CGI-сценарий для отправки форм, который вы можете набрать и использовать почти в любой системе UNIX. Аналогичные сценарии существуют и для Windows.
Однако не все так просто: конфигурация вашего Web-сервера должна допускать использование программ CGI. Дело в том, что некоторые провайдеры не дают разрешения запускать такие программы. В этом случае вам придется обратиться к услугам на стороне, как описано в предыдущем разделе.
Еще одна сложность состоит в том, что заставить работать приложение CGI далеко не так просто — тут есть свои хитрости, особенно для системы UNIX. Они подробно описаны в главе 10, так что если вы добыли программу для обработки ваших форм, изучите главу 10.
Создание собственной программы CGI
Если вы или кто-либо из ваших коллег, работающих с вами на одном Web-óçëå, немного умеете программировать, вы можете написать собственную программу CGI для обработки форм. В этом случае вы сможете пересылать данные из форм не только самому себе. С помощью форм и программ CGI удается сделать массу хитроумных вещей, — хотя бы регулярно сообщать информацию по какой-нибудь теме, например местную температуру воздуха.
Более важная особенность: собственная программа CGI, знающая, какие данные должны быть в формах, может, прежде чем обнародовать информацию, проверять ее на наличие ошибок. Например, приложение CGI для обработки формы Sassy's Worldwide Dogbite Service (“Сэсси: всемирная служба по укусам собак”), может требовать от пользователей включения в форму сведений об адвокате. При их отсутствии программа напишет HTML-ответ, предписывающий пользователю, прежде чем Сэсси организует заказанный им укус, завести адвоката. Программа может также проверить способ платежа и даже автоматически соединиться с соответствующей службой для верификации кредитной карточки. После проверки данных пользователя на наличие ошибок приложение CGI может сгенерировать экран “Спасибо” и передать специфическую для данного запроса информацию. Программа изучения собачьих укусов проанализирует поле “location of bitee” и вычислит пса, курирующего эту область. После отправки формы клиент может получить такой ответ: “Спасибо за заказ. Он будет выполнен йоркширским терьером Расти. Укус почтальона назначен на вторник, 15:45. Если у вас есть вопросы или жалобы на работу нашей службы, пожалуйста, пишите нам по адресу: sassy@dogbite. corn”. Естественно, пользователь тщательно взвесит предложение о посылке жалобы на компанию, специализирующуюся на собачьих укусах.