главная страница   свяжитесь с нами  бесплатная почта   карта сайта  заказать   flash-заставка   добавить в избранное   сделать стартовой 
поиск по сайту
вход для зарегистрированных пользователей регистрация забыл пароль?
 
 
 
УЧЕБНИК HTML
На главную Новости Философия Наша история Наши клиенты
 
Rambler's Top100
Заполняемые формы 
(Fill-out Forms, Fill-in Forms)

Всевозможные формы и бланки, в которые что-то надо вписать, какие-то пункты отметить крестиком, а что-то зачеркнуть ("мужской, русский, член ВЛКСМ, нет, нет, не участвовал, не был, не имеет..."), давно и прочно вошли в жизнь каждого человека, служа удобным инструментом быстрого сбора информации.

Стандарт HTML 2 предоставляет аналогичное "бумажному" прототипу средство запроса, называемое заполняемая форма (fill-out form или fill-in form).

Программа просмотра, выводя на экран документ, содержащий форму, дает читателю возможность заполнить ее, впечатывая текст в специальные поля, отмечая "щелчками" мыши "галочки" и выбирая нужные элементы из списков. После заполнения формы читатель нажимает экранную кнопку "Submit Query" ("послать запрос") - и программа просмотра высылает введенную информацию на указанный WWW-сервер, который передает запрос определенной программе, специально предназначенной для его обработки. Затем сервер, при необходимости, высылает программе просмотра ответ в виде заранее подготовленного или сгенерированного "на лету" документа. Описанный механизм обработки известен как Common Gateway Interface (CGI)Программы для обработки CGI-запросов пишутся квалифицированными программистами, чаще всего на языках C или Perl. Установка этих программ на WWW-сервере осуществляется администратором. Вы, как автор WWW-страниц, можете узнать у администратора, какие программы обработки запросов установлены на вашем сервере, и как их использовать, а также можете попросить установить на сервере ту или иную необходимую вам программу. При необходимости, вы можете взять образец заполняемой формы, обработка которой осуществляется нужной программой, отредактировать эту форму в соответствии с вашими требованиями и использовать в своих WWW-страницах. Как мы увидим ниже, в некоторых случаях использование CGI при работе с формами не обязательно: введенная в форму информация может обрабатываться локально, без взаимодействия с сервером (например, при помощи JavaScript), а данные из нее высылаться по электронной почте.

Теперь давайте взглянем на пример описания заполняемой формы на языке HTML, который даст вам первоначальное представление о формах и, надеемся, облегчит дальнейшее более глубокое знакомство с этим средством.

Пример заполняемой формы
<HR>
<FORM NAME="simple_form"   ACTION=
"http://hoohoo.ncsa.uiuc.edu/cgi-bin/post-query"METHOD= 
 "POST"> <UL><LI>Вашеимя: <INPUTTYPE="text"
NAME= "name_field" VALUE=""></LI> <LI>Пол:<INPUT TYPE="radio" NAME=
"sex" VALUE= "male"CHECKED>Муж. <INPUTTYPE="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>
<HR>
Как выглядит на дисплее

  • Ваше имя: 
  • Пол: Муж. Жен.
  • Ваш родной язык: 
  • Читаете по-английски 


В вышеприведенном примере описание формы на HTML открывает специальный флаг <FORM ...>, а закрывает - флаг </FORM>.

Атрибут NAME="..." присваивает форме символическое имя, используя которое можно на эту форму ссылаться в дальнейшем. Нашу форму мы, как видно из примера, назвали simple_form.

Атрибут ACTION="..." задает URL программы обработки запроса; в нашем случае это программа с именем post-query, расположенная в директории cgi-bin на WWW-сервере hoohoo.ncsa.uiuc.edu.

Атрибут METHOD="..." задает программе просмотра метод оформления запроса. Допустимы методы POST или GET, о которых мы поговорим несколько ниже.

Внутри формы разрешается располагать любой форматированный в соответствии с правилами HTML текст. Однако, главное, что можно располагать только внутри формы, - это описание элементов ввода, с помощью которых, собственно, читатель и сообщает запрашиваемую от него информацию. В нашем примере использовано шесть типов элементов ввода: 1) поле текстового ввода (text field), 2) раскрывающийся список (pull-down listbox), 3) "радиокнопка" (radio button), 4) "кнопка-флажок" (checkbox), 5) скрытый элемент (hidden) и 6) экранная кнопка (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> задает поле ввода, предлагающее пользователю выбрать одну из предложенных возможностей. По выполняемой функции этот элемент аналогичен рассмотренному выше, но более удобен при выборе из большого числа альтернатив. В нашем примере с его помощью создан раскрывающийся список, предлагающий пользователю выбор одной из четырех альтернатив, каждая из которых, как мы видим из примера, задана при помощи флага <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"> описывает экранную кнопку, при "нажатии" на которую программа просмотра отправляет запрос на сервер.

Теперь настал подходящий момент, чтобы сказать о том, как же происходит отправка запроса на сервер при "нажатии" кнопки "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).127

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">,
гдеtt>e_mail_address - адрес электронной почты, на который следует выслать данные из формы.

Советуем вам поэкспериментировать, используя свой собственный адрес электронной почты, чтобы не удивлять посторонних людей полученными от вас весьма странными письмами.К сожалению, ограниченный объем книги не позволяет рассказать о всех видах элементов ввода в формах. Тем более приходится оставить в стороне вопросы программирования CGI. Однако, мы надеемся, что чтение данного раздела послужит первым шагом для более глубокого изучения работы с заполняемыми формами и взаимодействия с WWW-серверами посредством CGI. За дополнительной информацией рекомендуем обратиться к следующим документам:

Следующая страница.
Начало документа.
 
На главную Новости Философия Наша история Наши клиенты
English online Web маркетинг Forex Отзывы о нас Персоналии
Рейтинг@Mail.ru
Яндекс цитирования
e-bay.ru - поиск и продажа  любых товаров
learning tests finance law forex computer work about us shop partners other
deutsch