HTML-формы

HTML-формы предназначены для пересылки данных от удаленного пользователя к Web-серверу. С их помощью можно организовать простейший диалог между пользователем и сервером (например, регистрацию пользователя на сервере или выбор нужного документа из представленного списка). Формы поддерживаются всеми популярными браузерами.

(Различные аспекты передачи данных Web-серверу будут рассмотрены здесь )

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

Тэг <FORM>

<FORM ACTION="URL" МЕТНОО=метод_передачи ЕНСТУРЕ=М1МЕ-!гип>

содержание_формы

</FORM>

В HTML-документе для задания формы используются тэги <FORM>. . .</FORM>, отмечающие, соответственно, начало и конец формы. Документ может содержать несколько форм, но они не могут быть вложены одна в другую. Тэг <FORM> имеет атрибуты ACTION, METHOD и ENCTYPE. Отдельные браузеры (Netscape, Internet Explorer) поддерживают дополнительные атрибуты помимо стандартных, например, CLASS, NAME, STYLE и др.

Атрибут ACTION — единственный обязательный. Его значением является адрес (URL) CGI-программы, которая будет обрабатывать информацию, извлеченную из данной формы.

Атрибут METHOD определяет метод пересылки данйых, содержащихся в форме, от браузера к Web-серверу. Он может принимать два значения; GET (по умолчанию) и POST.

При использовании метода GET данные формы пересылаются в составе URL запроса, к которому присоединяются после символа "?" в виде совокупности пар переменная=значение, разделенных символом "&". В этом случае первая строка запроса может иметь следующий вид:

После выделения данных из URL сервер присваивает их переменной среды QUERY_STRING, которая может быть использована CGI-программой.

При использовании метода POST данные формы пересылаются Web-серверу в теле запроса, после чего передаются сервером в CGI-программу через стандартный ввод.

Значением атрибута ENCTYPE является медиа-тип, определяющий формат кодирования данных при передаче их от браузера к серверу. Браузер кодирует данные, чтобы избежать их искажения в процессе передачи. Возможны два значения этого атрибута: appiication/x-wuw-form-uriencoded, используемое ПО умолчанию, И multipart/form-data.

Как видно из примера на рис. 15.1, форма отображается в окне браузера в виде набора стандартных элементов управления, используемых для заполнения полей формы значениями, которые затем передаются Web-серверу. Значение вводится в поле ввода пользователем или назначается по умолчанию. Для создания полей средствами языка HTML существуют специальные тэги:

<INPUT>, <SELECT>, <TEXTAREA>, которые могут употребляться только внутри

тэга <FORM>.  

Тэг <INPUT>

<INPUT ТУРЕ=тип_лоля_ввода ЫАМЕ=имя_лоля_ввода другие_атрибуты>

Наиболее употребительный тэг, с помощью которого можно генерировать внутри формы поля для ввода строки текста, пароля, имени файла, различные кнопки. Он имеет два обязательных атрибута: TYPE и NAME. Атрибут TYPE определяет тип поля: селекторная кнопка, кнопка передачи и др. Атрибут NAME определяет имя, присваиваемое полю. Оно не отображается браузером, а используется в качестве идентификатора значения, передаваемого Web-серверу. Остальные атрибуты меняются в зависимости от тира поля. Ниже приведено описание типов полей, создаваемых при помощи тэга <INPUT>, и порождаемых ими элементов ввода.

• TYPE=TEXT Создает элемент для ввода строки текста. Дополнительные атрибуты:
• MAXLENGTH=n Задает максимальное количество символов, разрешенных в текстовом поле. По умолчанию не ограничено,
• SIZE=n Максимальное количество отображаемых символов.
• УАЫ1Е=начальное_значение

Первоначальное значение текстового поля.

• TYPE=PASSWORD

Создает элемент ввода строки текста, отличающийся от предыдущего только тем, что все вводимые символы представляются в виде символа *.

• TYPE=FILE

Создает поле для ввода имени локального файла, сопровождаемое кнопкой Browse. Выбранный файл присоединяется к содержимому формы при пересылке на сервер. Имя файла можно ввести непосредственно, или, воспользовавшись кнопкой Browse, выбрать его из диалогового окна, отображающего список локальных файлов. Для корректной передачи присоединенного файла следует установить значения атрибутов формы равными ENCTYPE="multipart/form-data" И METHOD=POST. В Противном случае будет передана введенная строка, то есть маршрутное имя файла, а не его содержимое. Дополнительные атрибуты MAXLENGTH и SIZE имеют тот же смысл, что и для элементов типа TEXT и PASSWORD.

• TYPE=CHECKBOX Создает элемент-переключатель, принимающий всего два значения (on/off, вкл./выкл., истина/ложь) и отображаемый в виде квадратной кнопки. Элементы-переключатели CHECKBOX можно объединить в группу, установив одинаковое значение атрибута NAME для всех ее элементов. Дополнительные атрибуты:
• УАШЕ=строка Значение, которое будет передано серверу, если данная кнопка выбрана. Если кнопка не выбрана, значение не передается. Обязательный атрибут.
• CHECKED Если указан атрибут CHECKED, элемент является выбранным по умолчанию.

Если переключатели образуют группу, то передаваемым значением является строка разделенных запятыми значений атрибута VALUE всех выбранных элементов.

• TYPE=RADIO Создает элемент "радиокнопка", существующий только в составе группы подобных элементов, из которых может быть выбран только один. Все элементы группы должны иметь одинаковое значение атрибута NAME. Отображается в виде круглой кнопки. Дополнительные атрибуты:
• VALUE=Cтpoкa Обязательный атрибут, значение которого передается серверу при выборе данной кнопки. Должен иметь уникальное значение для каждого члена группы.
• CHECKED Устанавливает элемент выбранным по умолчанию. Один и только один элемент в группе должен иметь этот атрибут.
• TYPE=SUBMIT Создает кнопку передачи, нажатие которой вызывает пересылку на сервер всего содержимого формы. По умолчанию отображается в виде прямоугольной кнопки с надписью Submit. Дополнительный атрибут
• УАШЕ=яазвание_кнолки позволяет изменить надпись на кнопке. Атрибут NAME для данного элемента может быть опущен. В этом случае значение кнопки не включается в список параметров формы и не передается на сервер. Если атрибуты
• NAME И VALUE Присутствуют, Например,

<INPUT TYPE=SUBMIT NAME="submit_button" VALUE="OK">,

то в список параметров формы, передаваемых на сервер, включается параметр submit_button="OK". Внутри формы могут существовать несколько кнопок передачи.

• TYPE=RESET Создает кнопку сброса, нажатие которой отменяет все сделанные изменения, восстанавливая значения полей формы на тот момент, когда она была загружена. По умолчанию отображается в виде прямоугольной кнопки с надписью Reset. Надпись можно изменить при помощи дополнительного атрибута
• ЧКШЕ.=название_кнопки Значение кнопки Reset никогда не пересылается на сервер, поэтому у нее отсутствует атрибут NAME.
• TYPE=IMAGE Создает элемент в виде графического изображения, действующий аналогично кнопке Submit. Дополнительные атрибуты:
• ЗКС=иг!_изображения Задает ссылку (url) на файл с графическим изображением элемента.
• КЬТ.СП=тип_въ1равнивания Задает тип выравнивания изображения относительно текущей строки текста точно так же, как одноименный атрибут тэга <IMG>.

Если на изображении элемента щелкнуть мышью, то координаты указателя мыши в виде NAME.x=n&NAME.y=m включаются браузером в список параметров формы, посылаемых на сервер.

• TYPE=HIDDEN Создает скрытый элемент, не отображаемый пользователю. Информация, хранящаяся в скрытом поле, всегда пересылается на сервер и не может быть изменена ни пользователем, ни браузером. Скрытое поле можно использовать, например, в следующем случае. Пользователь заполняет форму и отправляет ее серверу. Сервер посылает пользователю для заполнения вторую форму, которая частично использует информацию, содержащуюся в первой форме. Сервер не хранит историю диалога с пользователем. Он обрабатывает каждый запрос независимо и при получении второй формы не будет знать, как она связана с первой. Чтобы повторно не вводить уже введенную информацию, можно заставить CGI-програм-му, обрабатывающую первую форму, переносить необходимые данные в скрытые поля второй формы. Они не будут видимы пользователем и, в то же время, доступны серверу. Значение скрытого поля определяется атрибутом VALUE.  

Тэг <SELECT>

<SELECT NAME=HM*_n<afl# SIZE=n MULTIPLE>

элементы OPTION </SELECT>

Тэг <SELECT> предназначен для того, чтобы организовать внутри формы выбор из нескольких вариантов без применения элементов ввода типа CHECKBOX и RADIO. Дело в том, что если элементов выбора много, то представление их в виде переключателей и радиокнопок увеличивает размеры формы, делая ее труднообозримой. С помощью тэга <SELECT> варианты выбора более компактно представляются в окне браузера в виде элементов ниспадающего меню или списка прокрутки. Тэг имеет следующие атрибуты.

• NAME= строка Обязательный атрибут. При выборе одного или нескольких элементов формируется список выбранных значений, который передается на сервер под именем NAME.
• SIZE=n Устанавливает число одновременно видимых элементов выбора. Если п=1, то отображается ниспадающее менй, если п>1, то список прокрутки с п одновременно видимыми элементами.
• MULTIPLE Означает, что из меню или списка можно выбрать одновременно несколько элементов. Если этот атрибут задан, то список выбора ведет себя как группа переключателей CHECKBOX, если не задан — как группа радиокнопок RADIO.
  

Элементы меню задаются внутри тэга <SELECT> при помощи тэга <OPTION>:

<OPTION SELECTED УАШЕ=строка>содержимое_тэга</ОРТION>

Закрывающий тэг </OPTION> не используется. Атрибут VALUE содержит значение, которое пересылается серверу, если данный элемент выбран из меню или списка. Если значение этого атрибута не задано, то по умолчанию оно устанавливается равным содержимому тэга <OPTION>. Например, элементы

<OPTION VALUE=Red>Red <OPTION>Red

имеют одно значение Red. В первом случае оно установлено явно при помощи атрибута VALUE, во втором — по умолчанию. Атрибут SELECTED изначально отображает элемент как выбранный.  

Тэг <TEXTAREA>

<TEXTAREA НАМЕ=имя ROWS=m COLS=n>

текст

</TEXTAREA>

Создает внутри формы поле для ввода многострочного текста, отображаемое в окне браузера в виде прямоугольной области с горизонтальной и вертикальной полосами прокрутки. Для пересылки на сервер каждая введенная строка дополняется символами %OD%OA (ASCII-символы "Возврат каретки" и "Перевод строки" с предшествующим символом %), полученные строки объединяются в одну строку, которая и отправляется на сервер под именем, задаваемым атрибутом NAME. Атрибуты:

• NAME ' __ Необходимый атрибут, используемый для идентификации данных при пересылке на сервер.
• COLS=n Задает число столбцов видимого текста.
• ROWS=n Задает число строк видимого текста.

Между тэгами <textarea> и </textarea> можно поместить текст, который будет отображаться по умолчанию.

Пример формы

Ниже представлен пример формы, включающей набор характерных полей и HTML-код, использованный для ее создания.

<htmlxheadxtitle>пpимep формы</^д^1ех/пеаЗ>

<body>

<b2>Регистрационная страница Клуба любителей фантастики</b2>

Заполнив анкету, вы сможете пользоваться нашей электронной библиотекой.

<br>

<form method="get" action="/cgi-bin/registrar.cgi">

<pre>

Введите регистрационное имя: <input type="text" name="regnarae">

Введите пароль: <input type="password" name="passwordl" max-length=8>

Подтвердите пароль: <input type="password" name="password2" max-length=8>

</pre>

Ваш возраст:

<input type="radio" name="age" value="lt20" checked >До 20

<input type="radio" name="age" value="20_30">20-30

<input type="radio" name="age" value="30_50">30-50

<input type="radio" name="age" value="gt50">CTapiue 50

<brxbr>

На каких языках читаете:

<input type="checkbox" name="language" value="russian" checked>pycciorii

<input type="checkbox" name="language" ^а1ие="english">английский

<input type="checkbox" name="language" Уа1ие="£гепсЬ">французский

<input type="checkbox" name="language" value="germnan">немецкий

<brxbr>

Какой формат данных является для Вас предпочтительным

<br>

<select name="format" size=2 >

<option selected value="HTML">HTML

<option value="Plain text">Plain text

<option value="PostScript">PostScript

<option value="PDF">PDF </select> <brxbr>

Ваши любимые авторы: <br> <textarea name="wish" cols=40 rows=3>

</textarea> <brxbr>

<input type="submit" value="OK"> <input type="reset" уа!ие="0тменить">

</form>

</body> \

</html>

Данная форма содержит:

• текстовое поле для ввода регистрационного имени пользователя;
• текстовое поле для ввода пароля, отображаемого в окне символами *;
• текстовое поле для подтверждения пароля, также отображаемого символами *;
• группу радиокнопок для указания возраста пользователя (единственный выбор);
• группу переключателей для указания языков, которыми владеет пользователь (множественный выбор);
• список прокрутки для указания предпочтительного формата данных (выбор из ограниченного списка);
• блок ввода многострочного текста для перечисления любимых авторов (неизвестное заранее количество строк);
• кнопку передачи с меткой ОК (у этого элемента отсутствует атрибут NAME, он не нужен, так как в данном примере всего одна кнопка передачи, а, значит, CGI-программе нет необходимости определять, от какой именно кнопки поступила команда передачи данных);
• кнопку сброса с меткой Отменить.

Итак, пользователь заполнил форму и щелкнул кнопку передачи Submit. Дальнейшее прохождение данных выглядит следующим образом.

1. Информация кодируется и пересылается на Web-сервер, который передает ее для обработки CGI-программе.

2. CGI-программа обрабатывает полученные данные, возможно, обращаясь за помощью к другим программам, выполняющимся на том же компьютере, и генерирует новый "виртуальный" HTML-документ, либо определяет ссылку на уже имеющийся.

3. Новый HTML-документ или ссылка передаются CGI-Программой Web-серверу для возврата клиенту.

Рассмотрим эти шаги более подробно.

Поделитесь этой записью или добавьте в закладки