4343

Обзор Common Gateway Interface (CGI)

Реферат

Информатика, кибернетика и программирование

Обзор CGI CGI (Common Gateway Interface, общий шлюзовой интерфейс) относится к числу средств, без которых нельзя обойтись как при создании комплексных Web-узлов, так и при управлении ими. CGI обеспечивает возможность писать сценарии, котор...

Русский

2012-11-16

149.5 KB

3 чел.

Обзор CGI

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

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

CGI обеспечивает средства динамического создания Web-страниц на основе информации, вводимой пользователями. За счет этого расширяется диапазон возможностей World Wide Web. Пользователь, не будучи ограниченным рамками заранее написанных документов, может использовать CGI-сценарии для создания широкого круга приложений — от обзоров до средств поиска, от программного обеспечения сервисных шлюзов Internet до игр и викторин. CGI обеспечивает возможность организовать подсчет количества пользователей, обратившихся к документу; более того, каждому из них может быть предложено расписаться в электронной книге гостей. Кроме того, CGI позволяет предоставлять пользователям любого рода информацию, регистрировать замечания клиентов и давать на них ответы.

Пример взаимодействия с CGI

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

<html>

<head><title>Гостевая книга</title><head>

<body>

<h1>Заполните мою гостевую книгу!</h1>

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

<pre>

Имя: <input type="text" name="fname">

Фамилия: <input type="text" name="lname">

<input type="submit" value=”Отправить”>

<input type="reset" value=”Сброс”>

</pre>

</form>

</body>

</html>

Форма составляется с помощью специальных тегов форм:

  •  Тег <form> определяет метод (method), используемый для формы (GET или POST), и действие (action), которое необходимо выполнить при передаче формы, т.е. URL CGI-программы, которой будут передаваться параметры.
  •  Тег <input> можно применять по-разному. Обратимся к нашему примеру и рассмотрим первые две строки документа, в которых используется этот тег. Здесь он служит для создания поля ввода текста и задания имени переменной, которую нужно связать с содержимым данного поля при передаче формы. Переменной, соответствующей первому полю, присваивается имя fname (имя), а второму — lname (фамилия).
  •  В следующих двух строках тег <input> используется для создания кнопки передачи (SUBMIT) и кнопки сброса (RESET).
  •  Тег </form> обозначает конец формы.

Когда пользователь нажимает кнопку передачи, данные, введенные в текстовые поля <input>, передаются в CGI-программу, заданную атрибутом action тега <form>.

Пересылка данных формы

В CGI-программу параметры пересылаются либо в самом URL, либо в теле текста запроса. Метод, применяемый для передачи параметров, определяется атрибутом method тега <form>. Метод GET предполагает пересылку данных в самом URL. При использовании этого метода браузер может инициировать HTTP-транзакцию следующим образом:

GET /cgi-bin/guestbook.pl?fname=Thyler&lname=Birden HTTP/1.0

При применении метода POST для передачи параметров используется тело HTTP-запроса. Вышеупомянутая транзакция по методу POST приобретет следующий вид:

POST /cgi-bin/guestbook.pl HTTP/1.0

[Здесь идут другие заголовки]

 

fname=Thyler&lname=Birden

При использовании любого способа передачи параметров для разделения пар переменная=значение используется амперсанд (&).

После выделения параметров из тела запроса или URL сервер передает пары переменная=значение в CGI-программу. Это делается либо посредством переменных среды UNIX, либо через стандартный ввод (STDIN). Если программа CGI вызывается методом GET, то параметры встроены в URL запроса, и сервер пересылает эти параметры в программу путем присваивания их переменной среды OUERY_STRING. Программа CGI затем извлекает параметры из этой переменной так же, как и при обработке любой другой переменной среды. Если программа CGI вызывается методом POST, то параметры встроены в тело запроса, и сервер передает текст тела в программу через стандартный ввод (STDIN).

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

Программе CGI нужно извлечь соответствующую информацию и затем обработать ее. Диапазон операций, которые программа CGI выполняет с извлеченной информацией, практически не ограничен. Программа может выдать анаграмму имени пользователя, сообщить, сколько раз в его имени встречается буква t, а то и просто включить это имя в список, который программист регулярно посылает на электронную биржу. Границы истинных возможностей программы известны только самому программисту.

Кодирование URL

Перед началом передачи введенных в форму данных в программу CGI каждому заданному пользователем значению ставится в соответствие имя элемента формы (которое задано атрибутом name). Таким образом формируются пары ключ-значение. Например, если пользователь ввел в ответ на вопрос о возрасте число 30, то пара ключ-значение будет иметь вид age=30. Пары ключ-значение отделяются друг от друга в пересылаемых данных символом &.

Поскольку при использовании метода GET данные формы передаются как часть URL, они не могут включать пробелы и другие специальные символы, применение которых в URL не допускается, а также символы, которые в URL имеют другое назначение, например символ косая черта (/). (В целях совместимости это ограничение накладывается и при использовании метода POST.) Чтобы обеспечить выполнение указанных условий, Web-браузер производит над предоставленной пользователем информацией специальные операции кодирования.

Кодирование представляет собой замену пробелов и других специальных символов в строках запросов их шестнадцатеричньши эквивалентами. (По этой причине кодирование URL иногда называют шестнадцатеричным кодированием.) Предположим, пользователь заполняет и передает форму, содержащую дату его рождения в формате дд/мм/гггг (например, 20/05/2004). Символы "косая черта" в дате рождения относятся к числу специальных символов, которые не должны появляться в запросе клиента, адресованном программе CGI. После выполнения кодировки запрос будет выглядеть так, как показано в следующем примере:

POST /cgi-bin/birthday.pl HTTP/1.0

Content-length: 23

 

birthday=20%2F05%2F2004

Последовательность %2F представляет собой шестнадцатеричный эквивалент символа "/". Следует, также, отметить, что символ пробела кодируется особым образом: он может заменяться не только шестнадцатеричным кодом (%20), но и знаком плюс (+). В сценариях CGI необходимо предусматривать способ "декодирования" данных, которые были введены в форму данных и после этого закодированы клиентом

Дополнительная информация о пути

Помимо строк запросов, пользователь может передавать в URL дополнительные данные, называемые дополнительной информацией о пути (extra path information). Сервер проверяет, где заканчивается имя программы CGI, все остальные данные считаются "дополнительными" и помещаются в переменную среды PATH_INFO. Следующая строка, которая служит для вызова сценария, включает дополнительную информацию о пути:

http://some.machine/cgi-bin/display.pl/cgi/cgi_doc.txt

Информация после текста display.pl является дополнительным путем. Можно воспользоваться и переменной PATH_TRANSLATED: ее значение включает, помимо значения переменной PATH_INFO, корневой каталог документов (DOCUMENT_ROOT).

Создание виртуальных документов

После завершения обработки полученной информации программа CGI должна создать новый документ, который будет предоставляться браузеру, или указать ссылку на существующий документ. В ОС UNIX программы посылают свою выходную информацию на стандартный вывод (STDOUT) как поток данных, состоящий из двух частей. Первая часть представляет собой полный или частичный HTTP-заголовок, в котором содержится (как минимум) описание формата возвращаемых данных (например HTML, ASCII-текст, GIF и т.д.). Пустая строка обозначает конец заголовка. Вторая часть — это тело выходных данных. В нем содержатся данные в формате, который задан в заголовке. Например:

Content-type: text/html

<html>

<head><title>Спасибо!</title></head>

<body><h1>Спасибо, что заполнили мою гостевую книгу!</h1>

</body></html>

В этом случае единственная строка заголовка выходных данных — Content-Type. Она содержит MIME-тип выходной информации, здесь — HTML (text/html). Эта строка существенно важна для каждой CGI-программы, поскольку она содержит информацию для браузера о том, как следует обрабатывать следующие за заголовком данные. Пустая строка отделяет заголовок от основного текста (который в данном случае имеет формат HTML, как это указано в заголовке.

Для Web-сервера не имеет значения, на каком языке написана программа CGI. В UNIX-системах наиболее популярным языком для написания CGI-программ являются PHP и Perl. Среди других языков, используемых в ОС UNIX, — С, C++, Tcl, Python. Программисты, работающие на компьютерах Macintosh, чаще пользуются языками Applescript и C/C++, а среди разработчиков, применяющих средства Microsoft Windows, популярны ASP, Visual Basic, Perl и C/C++. Для CGI-программирования можно использовать любой язык программирования, в котором предусмотрены средства получения данных с сервера и отправки их обратно.

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

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

Ниже приведен пример выходной информации программы, генерирующей виртуальный HTML-документ. Эта выходная информация включает полный HTTP-заголовок:

НТТР/1.0 200 OK

Date: Thursday, 20-May-04 11:12:13 GMT

Server: Apache/1.3.12

Content-type: text/html

Content-length: 2041

<html>

<head><title>Спасибо!</title></head>

<body><h1>Спасибо, что заполнили мою гостевую книгу!</h1>

</body></html>

Заголовок содержит имя протокола передачи, дату и время ответа, имя и версию сервера. (200 OK — это код состояния, генерируемый протоколом HTTP для сообщения о результатах выполнения запроса, который в данном случае завершился успешно). Кроме того, заголовок содержит тип и значение количества символов (последнее эквивалентно количеству байтов), содержащихся в выходной информации данных.

В результате после щелчка на кнопке “Отправить” пользователь увидит на экране ответ.

Пересылка бинарных данных

Генерируемые CGI-приложениями ответы не обязательно должны содержать только текстовые данные. Данный пример демонстрирует возможность получения в качестве ответа бинарных данных, например изображений. Предполагается, что в каталоге с CGI-приложением размещается изображение в формате GIF, которое пользователь увидит в браузере при обращении к серверу.

const

image_file = 'test.gif';

var

fh         : file of char;

buf        : char;

image_size : longint;

begin

assign( fh, image_file );

reset( fh );

writeln( 'Content-Type: image/gif' );

writeln( 'Content-Length: ', filesize( fh ) );

writeln;

while not eof( fh ) do

begin

 read( fh, buf );

 write( buf );

 end;

close( fh );

end.

Первоначально, в выходной поток выдается заголовок Content-Type c указанием о MIME-типе данных, в нашем случае это image/gif. После этого вычисляется размер бинарных данных, для чего используется функция filesize(). Указанная функция возвращает размер передаваемого файла в байтах. Эта информация передается в выходной поток в заголовке Content-Length. Далее следует предусмотренная стандартом одинарная пустая строка. Затем для чтения открывается файл с изображением, и производится побайтовая перепись его в выходной поток.

Подобным образом могут быть переданы любые бинарные данные. Важно, чтобы был правильно указан MIME-тип и количество данных. Для обозначения бинарных данных неизвестного типа часто используется MIME-тип application/octet-stream.

Переменные среды

Основная часть информации, необходимой программам CGI, передается им через переменные среды ОС UNIX. Программы могут обрабатывать эту информацию так же, как и значение любой переменной среды (например, посредством ассоциативного массива %ENV в Perl). В приведенной ниже таблице перечислены переменные среды, обычно используемые в CGI. Следует отметить, однако, что поскольку на разных серверах имена переменных среды, используемых для присвоения значений, могут различаться, то необходимо обязательно проверить эти имена в документации на конкретный сервер.

Переменная среды

Возвращаемое содержимое

AUTH_TYPE

Метод аутентификации пользователя. См. REMOTE_USER и REMOTE_IDENT.

CONTENT_LENGTH

Длина (в байтах или знаках) данных запроса, передаваемых в программу CGI через стандартный ввод.

CONTENT_TYPE

Медиа-тип данных запроса, например text/html.

DOCUMENT_ROOT

Корневой каталог дерева документов сервера.

GATEWAY_INTERFACE

Версия интерфейса Common Gateway Interface, с которой работает пользователь.

НТTР_АССЕРТ

Перечень медиа-типов, которые может принимать клиент.

HTTP_FROM

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

HTTP_REFERER

URL документа, на который клиент указывает перед обращением к программе CGI.

HTTP_USERAG_ENT

Браузер, которым клиент пользуется для выдачи запроса.

PATH_INFO

Дополнительная информация о пути, передаваемая в программу CGI.

PATH_TRANSLATED

Конвертированная версия пути, заданного в переменной PATH_INFO.

QUERY_STRING

Информация о запросе, переданная в программу. Для присоединения этой информации к URL используется знак "?".

REMOTE_ADDR

Удаленный IP-адрес, с которого пользователь посылает запрос.

REMOTE_HOST

Имя удаленной хост-машины, с которой пользователь посылает запрос.

REMOTE_IDENT

Идентификатор пользователя, посылающего запрос.

REMOTE_USER

Аутентифицированное имя пользователя, посылающего запрос.

REQUEST_METHOD

Метод, который использовался для выдачи запроса (например, GET, POST, HEAD).

SCRIPT_NAME

Имя выполняемого сценария (например, /cgi-bin/program.pl).

SERVER_NAME

Хост-имя или IP-адрес сервера.

SERVER_PORT

Номер порта хост-машины, на которой работает сервер.

SERVER_PROTOCOL

Имя и версия информационного протокола, который был использован для запроса.

SERVER_SOFTWARE

Имя и версия программного обеспечения сервера, которое отвечает на запрос клиента.

Ниже приведен пример простого CGI-сценария на языке Pascal, в котором переменные среды используются для выдачи на экран дисплея различной информации о сервере:

uses Dos;

var VarId: Integer;

begin

Writeln('Content-Type: text/html');

Writeln;

Writeln('<html><body>');

for VarId := 1 to EnvCount do

begin

 Writeln( EnvStr(VarId), '<br>');

end;

Writeln('</body></html>');

end.

Эта программа передает содержимое пяти переменных среды в HTML-документ. Библиотека Dos содержит все необходимые функции для получения переменных среды, в частности, EnvCount содержит количество переменных, а функция EnvStr() позволяет получить строку, содержащую имя переменной и ее значение по индексу. Формат стоки, возвращаемый EnvStr() следующий “имя_параметра = значение”.

Ниже приведен типичный пример выходных данных такой программы:

HTTP_ACCEPT_CHARSET=ISO-8859-1,utf-8;q=0.7,*;q=0.7

HTTP_ACCEPT_ENCODING=gzip,deflate

HTTP_ACCEPT_LANGUAGE=en-us,en;q=0.5

HTTP_CONNECTION=keep-alive

HTTP_HOST=localhost

HTTP_KEEP_ALIVE=300

HTTP_USER_AGENT=Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.6) Gecko/20040206 Firefox/0.8

REMOTE_ADDR=127.0.0.1

REMOTE_PORT=1344

SCRIPT_FILENAME=e:/program files/apache/cgi-bin/penv.exe

SERVER_ADDR=127.0.0.1

SERVER_NAME=localhost

SERVER_PORT=80

SERVER_SIGNATURE=Apache/1.3.12 Server at localhost Port 80

SERVER_SOFTWARE=Apache/1.3.12 (Win32) PHP/4.0.6

SYSTEMROOT=E:\WINNT
GATEWAY_INTERFACE=CGI/1.1

SERVER_PROTOCOL=HTTP/1.1

REQUEST_METHOD=GET

QUERY_STRING=

REQUEST_URI=/cgi-bin/penv.exe

SCRIPT_NAME=/cgi-bin/penv.exe

Разбор параметров запроса

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

uses Dos;

  function p_value ( query_str : string; p_name : string ) : string;

  var

     dev_pos  : byte;

     pair_str : string;

  begin

     p_value := '';

     while length( query_str ) > 0 do

     begin

        dev_pos := pos( '&', query_str );

        if dev_pos > 0 then

        begin

           pair_str  := copy( query_str, 1, dev_pos - 1 );

           delete( query_str, 1, dev_pos);

        end

        else

        begin

           pair_str  := query_str;

           query_str := '';

        end;

        dev_pos := Pos( '=', pair_str );

        if copy( pair_str, 1, dev_pos - 1 ) = p_name then

        begin

           p_value:=copy( pair_str, dev_pos + 1, length( pair_str ) - dev_pos );

           query_str  := '';

        end;

     end;

  end;

begin

  writeln('Content-Type: text/html');

  writeln;

  writeln('<html><body>');

  writeln(

     'Hello "' +

     p_value( GetEnv('QUERY_STRING'), 'fname' ) +

     ' ' +

     p_value( GetEnv('QUERY_STRING'), 'lname' )

     );

  writeln('</body></html>');

end.

Основа примера – функция p_value. Она принимает два параметра: строку запроса и имя параметра, значение которого нам необходимо выделить. Фактически, задача сводится к поиску в строке запроса пар имя=значение, где имя совпадает с именем затребованной переменной. В случае отсутствия в запросе необходимого параметра возвращается пустая строка, а в случае наличия двух параметров с одинаковым именем – тот, который идет в запросе первым. Сразу заметим, что для простоты не производится обратного декодирования значений из закодированного вида, т.е. все не латинские символы будут URL-закодированными, вида %XX.

Методом запроса, предполагается GET, поэтому параметры запроса мы может получить из переменной среды QUERY_STRING. Для получения переменной среды используется функция GetEnv() из модуля Dos. Единственный параметр указанной функции – имя переменной среды, которое необходимо получить.

В идеале, получать строку запроса из QUERY_STRING необходимо только в том случае, если использован метод GET. Для этого необходимо проверить значение переменной среды REQUEST_METHOD на равенство ‘GET’. В случае, если использован метод POST, т.е. REQUEST_METHOD равно ‘POST’, строку запроса необходимо читать из входного потока. Эта модификацию примера читатель может проделать самостоятельно.

Теги форм HTML

HTML-формы, предназначенные для ввода информации пользователем, широко используются во многих CGI-программах. Здесь рассматриваются теги, с помощью которых создаются формы, и приводится пример их применения.

Сводка тегов форм

Форма включает одно или несколько полей для ввода текста, селекторные кнопки, опции, ниспадающие меню и чувствительные к щелчку мыши изображения. Форма задается с помощью тега <form>. Кроме этих, она может содержать и другие элементы, такие как текст и изображения.

Тег <form>

Задавать форму можно в любом месте HTML-документа. Ее элементы помещаются между начальным тегом <form> и соответствующим конечным тегом </form>. Теги и атрибуты, заключенные между тегами <form>, образуют одну форму. Когда пользователь передает форму серверу, браузер посылает на сервер все значения этих элементов: и пустые, и стандартные, и измененные пользователем.

Обязательным атрибутом action тега <form> задается URL прикладной программы, которая предназначена для приема и обработки введенных в форму данных. Типичный тег <form> с атрибутом action выглядит следующим образом:

<form action="http://www.ora.com/cgi-bin/update">

</form>

В соответствии с заданным в примере универсальным локатором ресурса браузер должен установить контакт с сервером www.ora.com и передать введенные пользователем в форму значения прикладной программе с именем update, которая находится в каталоге cgi-bin.

Перед передачей данных формы серверу, браузер их особым образом кодирует, чтобы они не были искажены или испорчены в процессе передачи. Сервер по своему усмотрению либо производит декодирование этих параметров, либо передает их в закодированной форме в прикладную программу.

Стандартный формат кодирования — это MIME-тип application/x-www-form-urlencoded. С помощью необязательного атрибута enctype в теге <form> можно указать и другой формат. Но если вы захотите это сделать, следует учитывать, что существует только один дополнительный поддерживаемый формат — multipart/form-data.

При использовании стандартного формата кодирования — application/x-www-form-urlencoded — пробелы, содержащиеся в данных формы, преобразуются в знаки "+"; каждый символ, не относящийся к числу буквенно-цифровых, — в последовательность, которая состоит из знака процентов и двух шестнадцатеричных цифр, представляющих собой ASClI-код символа, а знаки переноса строк в многострочных данных — в %0D%0A.

При применении формата кодирования multipart/form-data каждое поле формы преобразуется в один из фрагментов MIME-совместимого составного документа.

Другой обязательный атрибут тега <form> — method задает метод, который браузер использует для передачи данных формы на сервер с целью их последующей обработки. Существует два метода: POST и GET.

Тег <input>

Тег <input> служит для определения одного из стандартных элементов ввода формы. Это может быть текстовое поле, селекторная кнопка, опция, чувствительное к щелчку мыши изображение или кнопка передачи. У этого тега есть много атрибутов, но обязательными для каждого элемента являются атрибуты type и name (для кнопки передачи — только type). Для каждого типа элемента ввода используется только подмножество допустимых атрибутов. В зависимости от типа элемента формы возможно применение дополнительных атрибутов этого тега.

Обязательный атрибут type тега <input> служит для задания типа элемента, включаемого в форму. Атрибут name служит для присвоения имени полю. Это имя используется в процессе передачи формы на сервер.

Наиболее полезным (и самым распространенным) является элемент ввода формы поле ввода текста. В окне браузера поле ввода текста отображается как пустое поле, в котором помещается одна строка данных. Поле ввода текста обеспечивает возможность ввода строки данных, которая при передаче формы на сервер интерпретируется как значение соответствующего элемента. Для создания поля ввода текста в форме, включенной в HTML-документ, необходимо с помощью тега <input> установить тип элемента формы text. Следует включить и атрибут name.

С помощью атрибутов size и maxlength задается ширина (в знаках) поля отображения вводимого текста и максимальное количество символов, которые пользователь может ввести в данное поле. Для атрибута maxlength используемое по умолчанию значение не ограничено, а для size — зависит от браузера.

Поле ввода текста обычно остается пустым, пока пользователь не введет в него что-либо с клавиатуры. Воспользовавшись атрибутом value, можно задать для этого поля начальное стандартное значение.

Поля пароля

Поле пароля практически во всем подобно обычному полю ввода текста, за исключением того, что символы, которые пользователь вводит в это поле, на экране не отображаются. Пользователь видит в поле пароля только последовательность символов *. Это делается для того, чтобы любопытные не могли получить доступ к паролям и другим важным данным.

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

Поля выбора файла

Поле выбора файла (впервые введенное в Netscape Navigator) обеспечивает для пользователя возможность выбрать хранящийся на его компьютере файл и при передаче формы послать его на сервер. При отображении браузером поле выбора файла выглядит как обычное поле, снабженное кнопкой с надписью "Browse". Пользователь может либо ввести полное имя файла с клавиатуры, либо, воспользовавшись упомянутой кнопкой, выбрать имя локального файла в системно-зависимом диалоговом окне.

Поле выбора файла создается в форме путем установки значения file атрибута type. Как и при задании других текстовых полей, атрибутам size и maxlength этого поля должны быть присвоены соответствующие значения.

Опции

Опция позволяет пользователю быстро и легко выделить элемент в форме или отменить сделанное выделение. Опции можно группировать, создавая наборы.

Каждая опция создается путем установления значения checkbox атрибута type в соответствующем теге <input>. Следует также включить в него обязательные атрибуты name и value. Если опция была выбрана, значение атрибута value будет использовано при передаче формы, если нет, то значение не передается. При указании необязательного атрибута checked (без значения) браузер отображает опцию как отмеченную и, если пользователь не отменит выделение опции щелчком мыши, значение атрибута value будет передано на сервер.

Браузер передает на сервер значения выделенных (отмеченных) опций вместе с другими параметрами формы. Значением опции является текстовая строка, указанная в обязательном атрибуте value.

Можно создать группу опций. Для этого нужно присвоить нескольким опциям одно значение атрибута name. Браузер автоматически собирает значения элементов этой группы и передает на сервер выбранные значения в виде строки, где значения элементов указаны через запятую. Это позволяет значительно упростить обработку форм на сервере.

Селекторные кнопки

Селекторные кнопки по принципу действия похожи на опции. Отличие их от последних заключается в том, что в группе может быть выбрана только одна селекторная кнопка. Селекторная кнопка создается путем присвоения атрибуту type тега <input> соответствующего элемента значения radio. Как и опции, селекторные кнопки требуют наличия атрибутов name и value; а кнопки, которым присвоено общее имя, являются членами группы. Можно задать одну из селекторных кнопок как отмеченную изначально (для этого в соответствующий элемент следует включить атрибут checked). Если ни один элемент в группе не отмечен, браузер автоматически отмечает первый элемент группы.

Каждой селекторной кнопке необходимо присвоить уникальное значение, чтобы после передачи формы сервер мог их различить.

Кнопки передачи

Назначение кнопки передачи (<input type=submit>) полностью соответствует ее названию: с помощью этой кнопки обеспечивается передача формы из браузера на сервер. Форма может содержать более одной кнопки передачи. В этот элемент можно включать атрибуты name и value.

В самом тривиальном варианте определения кнопки передачи (т.е. без атрибутов name и value) браузер отображает ее в виде небольшого прямоугольника или овала со стандартной надписью "Submit". Если задан атрибут value данного тега, то в качестве надписи используется текст, который является значением этого атрибута. Если указан атрибут name, то значение атрибута value кнопки передачи добавляется к списку параметров, который браузер посылает серверу.

Кнопки сброса

Название кнопки сброса (значение reset атрибута type тега <input>) тоже, как и в случае предыдущего элемента, отражает ее назначение. С помощью этой кнопки пользователь может сбросить (т.е. стереть или установить равными некоторым стандартным значениям) все элементы формы. По умолчанию браузер отображает кнопку сброса с надписью "Reset" (или "Clear"). Пользователь может задать и другую надпись на кнопке (для этого следует воспользоваться атрибутом value).

Специальные кнопки

Пользуясь значением image атрибута type элемента формы <input>, можно создать специальную кнопку, представляющую собой чувствительное к щелчку мыши изображение. Это кнопка особого вида, которая формируется на основе изображения, заданного пользователем. Когда пользователь выполняет на такой кнопке щелчок мышью, браузер, включив в список параметров формы координаты (х, у) указателя мыши, передает форму на сервер. При задании кнопки-изображения требуется атрибут src с универсальным локатором ресурса файла изображения. Можно, кроме того, указывать атрибут name. Можно также задавать атрибут align (он подобен атрибуту align в теге <img>), которым задается выравнивание изображения относительно текущей строки текста.

Скрытые поля

С помощью последнего из рассматриваемых в этой главе элементов <input> реализуется возможность встраивать в формы информацию, на способ обработки которой не могут повлиять ни браузер, ни пользователь. Эта информация в любом случае будет передаваться на сервер, и изменять ее также нельзя. Значения обязательных атрибутов name и value тега <input type=hidden> автоматически включаются в список параметров передаваемой формы. Они служат для "маркирования" формы. Такое "маркирование" оказывается очень полезным при выборе разных форм или вариантов формы из совокупности переданных и сохраненных форм.

Тег <textarea>

Тег <textapea> служит для создания многострочной области, предназначенной для ввода текста в окне браузера. В этой области пользователь может ввести практически неограниченное количество строк текста. При передаче формы браузер посылает этот текст вместе с его именем, заданным обязательным атрибутом name.

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

Для указания размеров многострочной текстовой области предназначены атрибуты cols и rows. Значениями этих атрибутов определяется видимая прямоугольная область для многострочного ввода.

Как правило, текст, который пользователь вводит в сформированную область ввода, передается на сервер в неизменном виде, при этом в позициях, соответствующих нажатиям клавиши [Enter], вставляется признак конца строки. Если атрибуту wrap присвоено значение virtual, то вводимый пользователем текст размещается в пределах текстовой области так, чтобы пользователь мог его видеть, но на сервер передается в таком виде, в каком был введен (признак конца строки вставляется только в позициях, соответствующих нажатиям клавиши [Enter]). Если атрибуту wrap присвоено значение physical, то текст размешается в пределах текстовой области так же, как и при задании значения virtual, но на сервер передается в том виде, в каком его видит пользователь (признаки конца строки вставляются также и в местах переноса). По умолчанию для атрибута wrap используется значение off.

Тег <select>

Опции и селекторные кнопки — это мощные инструменты для создания форм, обеспечивающих многовариантность вопросов и ответов. Но следует учитывать, что злоупотребление такими возможностями может привести к тому, что размеры формы значительно возрастут и заполнение ее превратится в достаточно утомительный процесс. С помощью тега <select> реализуются два компактных варианта таких форм: ниспадающие меню и прокручиваемые списки.

Ниспадающее меню создается путем помещения списка элементов с тегами <option> в тег формы <select>.

Как и для других тегов формы, здесь необходим атрибут name. Браузер использует его при передаче на сервер элементов <select>. Ниспадающее меню, в отличие от группы селекторных кнопок, не содержит предварительно выделенных элементов, поэтому если пользователь ничего не выделил, то при передаче формы никакие значения на сервер не передаются. В противном случае браузер передает значение выделенного элемента или создает из значений нескольких выделенных элементов один общий список параметров, отделяя их друг от друга запятыми. Вместе с данными формы <select> на сервер передается и значение атрибута name.

Чтобы обеспечить возможность одновременного выбора нескольких элементов меню, в тег <select> следует включить атрибут multiple. В этом случае работа с элементами меню будет организована так же, как и в группе опций, задаваемых с помощью тегов <input type=checkbox>. Если атрибут multiple не задан, в ниспадающем меню можно выбрать только один элемент, как в группе селекторных кнопок.

Атрибутом size задается количество одновременно отображаемых элементов меню. Значением атрибута size должно быть положительное целое число. Если значение атрибута size равно 1, а аргумент multiple не задан, то список <select> обычно отображается как всплывающее меню. Если задано значение, превышающее 1, или указан атрибут multiple, список элементов <select> будет представлен в виде прокручиваемого списка.

Элементы тега <select> определяются с помощью тегов <option>. Браузер отображает содержимое тега <option> как элемент меню или прокручиваемого списка, поэтому между указанными тегами должен размещаться только текст без разметки.

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

По умолчанию все элементы многовариантного тега <select> отображаются как невыделенные. Чтобы элемент отображался как предварительно выделенный (таких элементов может быть несколько), нужно включить в соответствующий тег <option> атрибут selected (без значения). Пользователь может либо отменить выделение этого элемента (или элементов), либо оставить все как есть. Если ни в одном из тегов <option> тега <select> не задан атрибут selected, при отображении выделяется первый элемент.

Пример формы

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

<html><head><title>Web-Банк</title></head>

<body>

<h1> Web-Банк </h1>

Добро пожаловать на страницу нашего банка. Вы не можете

положить или снять деньги, но Вы, конечно, можете

проверить состояние баланса, сделать перевод, и просмотреть

список последних транзакций.

<form method="post" action="/cgi-bin/banking.pl">

<pre>

Номер аккаунта: <input type="text" name="acct">

PIN:            <input type="password" name="pin" size=8>

Транзакции:     <select name="transaction">

               <option selected>Баланс

               <option>Перечисления

               <option>Последние транзакции

               <option>Неоплаченные чеки

               </select>

<input type="radio" name="verify by mail" value="yes" checked> Послать подтверждение по почте

<input type="radio" name="verify by mail" value="no"> Не посылать подтверждения по почте

Присылать информацию о:

<input type="checkbox" name="info" value="cds"> Депозитах

<input type="checkbox" name="info" value="mortgages"> Процентах по займам за жилье

<input type="checkbox" name="info" value="autoloans"> Ставках по вкладам

Несколько слов о нашем сервисе:

<textarea rows=5 cols=60 name="comments"> </textarea>

<input type="submit"> <input type="reset">

</form>

</body></html>

Отметим, что в данной форме присутствует текстовое поле <input>, которое предназначено для ввода номера банковского счета пользователя. Для получения личного идентификационного номера пользователя (PIN) используется поле пароля, чтобы цифры, из которых он состоит, не появлялись на экране. (Как уже упоминалось, на практике эта мера не считается достаточной для защиты PIN, так как по Интернету введенные данные пересылаются незашифрованными.)

Затем следует список, в котором пользователь может выбрать операцию: получить данные об остатках по счетам, перевести деньги, просмотреть список последних операций по указанному счету либо приостановить платеж по чеку.

Для того чтобы пользователь мог получить уведомление о выполнении данной операции, использоваются две селекторные кнопки. По умолчанию уведомление отправляется. С помощью селекторных кнопок пользователь может выбрать только один из вариантов, т.е. он может либо получить, либо не получить уведомление. Отметим, что все элементы селекторных кнопок должны иметь одно и то же значение атрибута name и разные значения атрибута value.

Ниже расположено несколько опций, с помощью которых пользователь может указать, какую дополнительную информацию он хотел бы получить. В форме предусмотрен и блок ввода текста — <textarea>, который позволяет пользователю "выговориться", т.е. ввести комментарии и предложения. Наконец, в нижней части формы имеются две кнопки: кнопка передачи и кнопка сброса.

При передаче этой формы браузер посылает на сервер приблизительно следующий запрос:

POST /cgi-bin/banking.pl HTTP/1.0

Content-Length: 154

(другие заголовки)

acct=11732432&pin=0545&transaction=Account+balances&verify_by_mail=YES&info=cds,autoloans&comments=What+use+is+this+without+withdrawals+and+deposits%21%21


 

А также другие работы, которые могут Вас заинтересовать

75574. Сполучені Штати Америки, План-конспект уроку з англійської мови для учнів 9-х класів 68.5 KB
  Обладнання: підручник географічна карта США граматична таблиця Узгодження часів в англійській мові пісня meric the Beutiful НО1 текст Kthrine Lee Btes H02 True or Flse H03 Keyfcts H04. Т: The topic of our todys lesson is The geogrphicl position of the United Sttes of meric...
75575. Географічне положення Сполучених Штатів Америки, План-конспект уроку з англійської мови для учнів 9-х класів 55.5 KB
  Обладнання: підручник географічна карта США граматична таблиця Узгодження граматичних часів в англійській мові Mtch the pirs НО1; таблиця The Sequence of Tenses H02. Т: The topic of our...
75576. Нью-Йорк - найбільше місто США 61.5 KB
  Т: Tody we re going to tlk bout New York the lrgest city in the US. Предявлення тексту для читання New York впр.Т: Wht do you think Why do people like to trvel to different countries nd cities Do you wnt to know more bout the world too Why Comment the quottion of Jmes Bone New York is the city of dredful heightrdquo;.New Yorkthe Hudson RiverMnhttnBrodwyWll StreetStock Exchnge в Do you know wht the following words menВиконання впр.
75577. Визначні та пам’ятні місця США. Узгодження часів в англійській мові 73.5 KB
  Обладнання: підручник географічна карта США граматична таблиця The Sequence of Tenses HO1 Chnge the pronouns nd dverbs H02 Wht do they chnge for H03 Detective Dniels’ Report H04 True or Flse HOs. The def reporter sks Wht did he she sk nd wht did he she sy The student who sked the question reports his her question nd the nswer he she got. Word flshcrds: How old re you Where do you live re you mrried Hve you ever been to Mdrid before Do you like Spnish food re you stying here long Hve you visited Toledo Whos your...
75578. Визначні та пам’ятні місця США 76.5 KB
  By the end of the lesson you should be ble: to recognize understnd nd operte lexicl mteril bout the Gret Lkes the most interesting plce of the US; to identify min ides nd detils from the text for reding...
75579. Національні свята в Україні та США 58.5 KB
  Практикувати учнів в ауДіюванні та читанні текстів з метою отримання загального уявле (skimming) та максимально повного й точного розуміння усієї інформації, що в них міститься (scanning). Підготувати учнів до самостійного усного висловлювання на основі прослуханого та прочиного текстів.
75580. Національні символи. Активізація ЛО теми State Symbols 60.5 KB
  Обладнання: підручник зображення прапорів англомовних країн: Великобританії США Канади Новозеландії та Австралії; Державний прапор і Герб України запис Гімну України його переклад англійською мовою HO1 Mtch the pirs H02 Mtch the country nd description of its Ntionl flg H03. the oldest flg 6. bluendyellow flg 9...
75581. З історії відомих винаходів людства, Числівники, План-конспект уроку з англійської мови для учнів 9-х класів 141.5 KB
  Обладнання: підручник Numbers HO1 Write the numbers s words HO2 ordinl Numbers H03 Clendrrdquo; H04 Look t the picture H05 Frctions nd decimls H06 Circle the letter Н07 автентичний текст Blue Jens Cross out the word HOs. We hve to review the grmmr bout Numbers: crdinl numbers ordinl number; frctions decimls. By the end of the lesson you should be ble: to review nd operte the numbers crdinl ordinl frctions decimls when dcing exercises; to identify min ides nd detils of uthentic text for reding despite the...
75582. Американські індіанці, План-конспект уроку з англійської мови для учнів 9-х класів 61.5 KB
  Обладнання: підручник Mtch the pirs HO1 ngrms H02 карта світу на дошці Put the sentences given below in the correct order H03 автентичний текст для позакласного читання mericn Indins H04. Т: The topic of our todys lesson is: mericn Indins . By the end of the lesson you should be ble: to recognize understnd nd operte lexicl mteril bout Indins; to identify min ides nd detils from the text for reding; to prticipte in common converstionl exchnge on the topic of our...