HTML-формы

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

языке HTML для задания форм используется теги <FORM> и </FORM>. Этот контейнер размещается внутри тела HTML-документа, причем таких контейнеров может быть несколько, но вложений их один в другой не допускается. Тег <FORM> может содержать несколько параметров, а именно ACTION, METHOD, ENCTYPE. Некоторые браузеры поддерживают и другие параметры, помимо перечисленных трех стандартных. Первый из параметров задает адрес (URL) CGI-программы, которая будет обрабатывать данные этой формы. Это единственный обязательный параметр тега <FORM>.

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

Параметр ENCTYPE определяет медиа-тип, используемый для кодирования и пересылки содержимого формы. Обычно его называют MIME-типом, где MIME-это аббревиатура, которая расшифровывается как Multipurpose Internet Mail Extension (многоцелевое расширение для Интернет-почты). Именно кодирование в соответствии со стандартом MIME позволяет безошибочно пересылать файлы, присоединяемые к HTML-форме.

Для создания отдельных полей внутри контейнера <FORM> и </FORM> используются теги <INPUT>, <SELECT> и <TEXTAREA>.
Первый из этих тегов употребляется чаще других и обеспечивает многочисленные возможности ввода информации. Так, с его помощью можно осуществить ввод текста различного назначения, создать группу элементов-переключателей, одиночные кнопки для выполнения некоторых стандартных операций (например, сброс введенных данных), поля для установки флажков, поле для ввода имени файла, присоединяемого к форме.

Тег <SELECT> используется для организации компактной структуры для вывода одного варианта из нескольких, задаваемых в виде списка прокрутки. А тег <TEXTAREA> создает внутри формы поле для ввода многострочного текста в виде прямоугольной области, снабженной при необходимости полосами прокрутки. Кратко рассмотрим использование всех этих тегов.

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

Параметр TYPE может принимать несколько значений. Одно из этих значений TYPE=«TEXT». В этом случае в форме создается узкая прямоугольная область (фрагмент строки) для ввода текста. Причем при этом значении параметра TYPE в теге INPUT могут использоваться три дополнительных параметра, а именно: MAXLENGTH=<число>, который определяет максимальное число вводимых символов, SIZЕ=<число>, задающий количество отображаемых в форме символов, и VALUE, который определяет значение текстового поля по умолчанию.

Другой вариант текстового поля - это TYPE=«PASSWORD». В этом случае вводимые символы отображаются в форме звездочками. Однако реальная безопасность передаваемого пароля не обеспечивается, так как на сервер эта строка передается в незашифрованном виде, т. е. открыто.

Еще одно значение TYPE=«FILE», причем в этом случае одновременно сполем для ввода текста (имени локального, т. е. размещенного на компьютере клиента, файла) в форме создается кнопка с подписью BROWSE (просмотр). Файл, выбираемый в процессе просмотра (локальный адрес его может быть сразу введен в поле), подсоединяется к содержимому формы при ее пересылке на сервер.

Для корректного выполнения этой операции должны быть правильно заданы параметры формы: METHOD=«POST» и ENCTYPE=«MULTIPART/FORM-DATA». В противном случае вместо содержимого файла на сервер будет передано только его имя.

Значение TYPE=«CHECKBOX» создает поле ввода одного символа-флажка или переключателя типа «включено» - «выключено». Такие поля могут объединяться в группы путем задания для всех одного имени (NAME). Используется параметр VALUE, который передает на сервер выбранные переключатели. Может присутствовать также параметр CHECKED, указывающий, что определенное значение соответствующего элемента является выбранным по умолчанию.

Значение TYPE=«RADIO» определяет структуру, подобную многопозиционному переключателю, т. е. набор из нескольких выключателей, один (и только один) из которых включен в любой отрезок времени. Каждый выключатель оформлен в виде круга, внутри которого при его выборе появляется точка. Здесь строковая переменная VALUE передает на сервер значение выбранной кнопки, а параметр CHECKED устанавливает значение по умолчанию.

Значение параметра TYPE=«RESET» или же «SUBMIT» соответственно отменяет все введенные в форму значения или же пересылает содержимое формы на сервер. В обоих случаях в форме отображаются кнопки с соответствующим и надписями. Надписи на кнопках можно русифицировать, задав значение параметра VALUE равным «ОТМЕНА» или же «ОК» («ПЕРЕСЫЛКА»). Возможно использование значения параметра TYPE=«IMAGE». В этом случае создается графическое изображение, аналогичное кнопке SUBMIT. Адрес изображения задается стандартным параметром SRC=<URL файла-изображения>, а способ выравнивания значением параметра ALIGN.

Иногда вместо тега INPUT используется контейнер <SELECT> и </SELECT>, который позволяет организовать выбор значений в пределах спискового окна. Это обеспечивает экономию пространства формы. Пример контейнера:

<SELECT NАМЕ='имя поля' SIZE=[число видимых элементов списка]>

<OPTION VALUE='значение 1-го элемента'> значение элемента

<OPTION VALUE='значение 2-го элемента'> значение элемента

<OPTION VALUE='значение 3-го элемента'> значение элемента

</SELECT>

Если требуется возможность выбора нескольких значений элементов списка, то внутри тега <SELECT> после параметра SIZE используется дополнительный параметр MULTIPLY. Ему не требуется присваивать какого-либо значения, само его наличие в пределах тега является достаточным.

Внутри формы может использоваться и еще один контейнер, а именно с тегом <TEXTAREA>. Он обеспечивает ввод многострочного текста в прямоугольное окно. Параметры этого тега: NAME - для задания имени соответствующей переменной, ROWS и COLS - для определения размера прямоугольного окна, внутри которого набирается нужный текст. Может быть задан текст, выводимый внутри этого окна по умолчанию.

В качестве примера можно остановится на форме сервера www.rambler.ru, которая выводится на браузере клиента, желающего получить бесплатный почтовый адрес. На рис. 2.13

, представлена такая форма в несколько усеченном формате. Как видно на рисунке, большинство полей - текстовые однострочные, задаваемые тегом INPUT и значениями параметра TYPE, равным TEXT (E-mail, «Имя», «Фамилия», «Возраст») и PASSWORD («Введите пароль» и «Подтвердите пароль»). В состав формы включены два переключателя: для указания пола клиента и его юридического статуса (физическоелицо или представитель юридическоголица). Для сокращения размеров формы (она и так получилась довольно большой) в ней используются четыре списковых окна с одним единственным видимым элементом. Это реализуется с помощью тега-контейнера <SELECT> со значением параметра SIZE=1.

Наконец, в форме предусмотрена область для ввода текста, задаваемая с помощью тега <TEXTAREA>. Размер этой области: шесть строк и около ста столбцов. По умолчанию в этой области выводится текст юридического соглашения с клиентом бесплатной электронной почты, указывающий права и обязанности сторон. Клиент не может изменять этоттекст, он должен его прочесть и принять условия соглашения, изложенные в этом тексте, если намерен получить бесплатный почтовый адрес на этом сервере.В конце формы предусмотрена кнопка типа SUBMIT, представленная в виде графического изображения с надписью «Зарегистрироваться». Если клиент согласен с текстом соглашения, он нажимает кнопку «Зарегистрироваться» и получает бесплатный почтовый адрес на сервере RAMBLER.

2.9.

Содержание раздела