На этом шаге мы рассмотрим создание формы.
На прошлом шаге мы говорили о динамическом формировании Web-документов и теперь рассмотрим конкретный пример на эту тему. Одна из популярных задач в Интернете, это получение каких-либо сведений от клиента, их обработка на сервере и отправка клиенту документа-ответа. Задача эта решается в HTML-документах обычно при помощи формы. После заполнения формы, запрос отправляется на сервер при помощи метода POST, стандартного метода протокола HTTP. Метод используется для отправки сообщений на электронные доски объявлений, в группы новостей, для добавления информации в базу данных и вообще, в тех случаях, когда нужно получить от клиента данные и отправить их для обработки на сервер. Если в форму вводятся данные для формирования на их основе запроса, то в этом случае используется метод GET.
Рассмотрим следующий пример. Допустим у нас на сервере организована телеконференция. И мы рассмотрим маленькую часть этого проекта: как получать от клиента новые сообщения, чтобы затем публиковать их на сервере. Задача состоит из двух частей: клиенту нужно заполнить форму и как-то послать данные на сервер; сервер должен получить эти данные и обработать. Первая половина задачи решается при помощи формы - стандартного элемента языка HTML. Форма включает в себя текст, элементы разметки, элементы управления (кнопки, флажки, радио-кнопки, меню и др.) и надписи к этим элементам управления. Поскольку у формы много возможностей, мы обсудим только те, что будем использовать в примере. Форма начинается с тега <FORM> и заканчивается тегом </FORM>. В начальном теге могут задаваться несколько атрибутов. Обязательно указывается атрибут ACTION, в котором задается URI получателя данных от формы. Обычно это имя сервера и имя приложения, которое должно обработать данные. Атрибут METHOD задает имя используемого метода протокола HTTP. О методах мы поговорим позже, скажем только, что в формах возможны только два значения - GET и POST. В случае метода GET данные формы используются для формирования запроса серверному приложению, которое должно сформировать ответ на основе этого запроса, и вернуть его клиенту. В нашем случае используется метод POST, предназначенный для публикации данных в Web. Вводятся данные с помощью тегов <INPUT>, <SELECT>, <TEXTAREA> и др. Тег <INPUT> обслуживает ввод строки текста, пароля (вводимые символы пароля при этом скрываются и могут заменятся, например, на символ "звездочка") и создание элементов управления флажок и радио-кнопка. Кнопки SUBMIT и RESET, используемые для отправки данных на сервер и очистки формы, также, создаются с помощью этого тега. При нажатии на кнопку RESET, удаляется введенная пользователем информация, и в элементы управления подставляются значения по умолчанию, определяемые атрибутом VALUE. Тип элемента указывается с помощью атрибута TYPE. Для перечисленных элементов управления этот атрибут принимает значения TEXT, PASSWORD, CHECKBOX, RADIO, SUBMIT и RESET. Тег <SELECT> применяется для задания меню. С помощью тега <TEXTAREA> можно ввести в форму текстовый блок. В обязательном порядке теги, задающие элементы управления должны, содержать атрибут NAME, с помощью которого каждому элементу присваивается имя, которое будет отсылаться программе-обработчику вместе со значением, полученным этим элементом управления, Из рассмотренных нами тегов в примере применяются <INPUT> и <TEXTAREA>. У этих тегов еще имеются размерные атрибуты SIZE, COLS и ROWS которые задают размер в символах и количество столбцов и строк в текстовом блоке. В этом примере используется таблица; с тэгами, используемыми для создания таблиц, можно познакомиться здесь.
Форма для заполнения данными приводится ниже.
<html> <head> <title>Oтправка нового сообщения в конференцию</title> </head> <body> Отсюда вы можете отправить новое сообщение. Для этого необходимо заполнить поля ввода и нажать кнопку "Отправить". Не обязательно все поля должны быть заполнены, однако тема должна быть обязательно указана. <center><h3>Hoвoe сообщение в конференцию</center> <form method=POST action="http://myserver/cgi-bin/newmessage.exe"> <table> <tr> <td>Имя:</td> <td><input type=text name="name" size = 50> </td> </tr> <tr> <td>Teмa : </td> <td><input type=text name="subject" size = 50> </td> </tr> <tr> <td>Bam e-mail :</td> <td><input type=text name="email" size=50></td </tr> </table> Сообщение:<br> <textarea COLS = 80 ROWS = 5 name="body"></textarea> <input type=submit name="post" value="0тправить"> <input type=reset value="0чистить"> </form> </body> </html>
На следующем шаге мы рассмотрим использование формы.