Хостинг
Пример
Библиотеки

ОБЩИЙ ШЛЮЗОВЫЙ ИНТЕРФЕЙС: КНОПОЧКИ, ПОЛЯ ВВОДА


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


Быстрый переход по странице:


Тэг <FORM>


Тэг <FORM> используется для создания формы на Web-странице и для того, чтобы указать, что все поля внутри этого тэга принадлежат одной форме. Единственный способ поместить на странице поле ввода - заключить его в тэг <FORM>. Для создания формы применяется следующая конструкция:


<FORM>
<!-- Здесь вставляются поля формы -->
</FORM>


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


Атрибут ACTION


Обработка формы в некотором смысле аналогична обработке ссылки, так как при обработке формы у сервера также запрашивается определенный ресурс. В общем случае URL этого ресурса указывает на CGI-программу, которая должна обработать данные, введенные в форму. Создавая форму, в атрибуте ACTION вы указываете, какой ресурс обрабатывает данные этой формы. В следующем примере данные будут переданы программе cgi-bin/example.pl


<FORM ACTION="cgi-bin/example.pl">
<!-- Здесь вставляются поля формы -->
</FORM>


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


Атрибут METHOD


Этот атрибут указывает, каким способом передать данные серверу. Для этого существеют два метода - GET и POST. Вообще говоря, эти методы взаимозаменяемы, по крайней мере с точки зрения создания форм. При написании CGI-программы вам уже придется подумать, какой из методов передачи данных применить. Если метод не указан явно в тэге <FORM>, по умолчанию применяется метод GET.


Атрибут ENCTYPE


Этот атрибут указывает, как кодируются данные при передаче серверу. Типы кодирования перечислены в спецификации MIME. По умолчанию применяется тип кодирования application/x-www-form-urlencoded. Второй тип кодирования, который применяется только для полей, связанных с файлами, - multipart/form-data.


Атрибут TARGET


Если ваша страница состоит из нескольких фреймов, вы сможете с помощью атрибута TARGET указать, в каком фрейме отображать результаты обработки данных формы. Например, если ваша страница имеет два фрейма, left_nav и main_content, можете расположить поисковую форму в левом фрейме, а результаты поиска в правом, основном, фрейме. Для этого вы должны указать в тэге <FORM> атрибут TARGET="main_content". По умолчанию результаты обработки формы попадают в тот же фрейм, в котором находится сама форма.

Тэг <INPUT>


Тэг <INPUT> применяется для создания большинства полей формы. Атрибут TYPE этого тэга указывает, какое именно поле создается, а остальные атрибуты определяют параметры этого поля. Существуют чледующие типы полей: текстовое, поле пароля, флажок, переключатель, скрытое поле и поле файла. С помощью тэга <INPUT> создаются также кнопки Submit и Reset (Отправить и Очистить). Ниже мы рассмотрим все это подробнее.


Поговорим об атрибутах NAME и VALUE, которые есть у всех полей. Когда данные передаются серверу они организовываются в пары: имя-значение. Атрибут NAME позволяет вам идентифицировать (проименовать) каждое поле в форме. Вообще говоря, форма служит для того чтобы связать с каждым полем (именем) некоторое значение. Атрибут VALUE позволяет предварительно задать это значение. Смысл этого атрибута зависит от типа поля.


Иногда бывает так, что поля объединяются в группы, причем все поля группы имеют одно и то же имя. Мы рассмотрим такой случай ниже.

Кнопка


Кнопка (Button) применяется для старта javascript процедур. Атрибуту TYPE дается значение button. Атрибут VALUE определяет ее надпись. Вот пример кнопки:


<INPUT TYPE="button" value="Обработать" onClick="имя javascript процедуры">

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


Кнопка передачи (Submit) применяется для передачи данных формы на сервер. Как именно данные будут переданы и куда, определяется в тэге <FORM> при создании формы. Для создания кнопки передачи атрибуту TYPE дается значение submit.


Атрибут VALUE определяет ее надпись. Вот пример создания кнопки передачи:


<INPUT TYPE="submit" value="передать данные">

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


Кнопка сброса (Reset) предназначена для сброса всех введенных пользователем данных. Если для некоторого поля был указан атрибут VALUE, то при щелчке на кнопке сброса в поле заносится значение этого атрибута. Если такой атрибут не был указан, то поле просто очищается. Для создание кнопки сброса атрибуту TYPE дается значение reset.


Атрибут VALUE самой кнопки определяет ее надпись. Вот пример создания кнопки сброса:


<INPUT TYPE="reset" value="Сброс данных">


Файловые поля


Файловые поля предназначены для того, чтобы пользователь мог с помощью формы передать свой файл на сервер. Для создания такого поля атрибуту типа поля дается значение file. В таком поле пользователь может указать файл на своем компьютере, и при передаче данных этот файл юудет отослан вместе с ними. Форма имеющая файловые поля должна применять метод передачи POST и тип кодировки multipart/form-data.


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


Вот фрагмент кода, создающий файловое поле:


<P>Фотография:<br>
<INPUT TYPE="file" NAME="foto">
</p>


Фотография:


Текстовое поле


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


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


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


Вот пример тэга <INPUT>создающего текстовое поле:


<INPUT TYPE="TEXT" NAME="Name" SIZE="30" MAXLENGTH="60" VALUE="http://">


Вот так выполняется этот код:



Поле пароля


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


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


Вы можете создать поля для ввода пароля, указав в атрибуте TYPE значение password. Остальные атрибуты задаются так же, как и для обычного текстового поля. Вот пример кода и сразу же образец его выполнения:


<INPUT TYPE="password" NAME="password" size="10" maxlength="10">



Флажок


Флажок служит для двоичного выбора - он или установлен или сброшен. Когда пользователь щелкает на флажке, его значение меняется на противоположное. Если флажок был установлен, он сбрасывается, и наоборот. Если флажот установлен в момент передачи данных форме, его пара имя-значение передается серверу, если он был сброшен, серверу ничего не передается.


Для того чтобы создать флажок, необходимо задать атрибуту TYPE значение checkbox. Атрибуту VALUE необходимо придать некоторое значение, иначе вы не сможете проверить состояние этого флажка так как будет недостаточно данных для формирования пары имя-значение. Неважно какое значение вы присвоита атрибуту VALUE, это просто условное значение, которое можно проверить в CGI-программе. Обычно его задаюк как yes или no.


У флажка может быть еще один атрибут - CHECKED. Он не имеет значения, просто если он установлен, флажок при открытии страницы будет установлен, если не указан - флажок будет сброшен. Вот пример кода и сразу же образец его выполнения:


<P>Ваши интересы:<br>
<INPUT TYPE="checkbox" NAME="books" value="yes">Книги<br>
<INPUT TYPE="checkbox" NAME="music" value="yes">Мызыка<br>
</p>


Ваши интересы:
Книги
Музыка


Переключатели


Переключатель предназначен для выбора из нескольких возможных ответов. Когда вы выбираете один из вариантов, то выбранный ранее сбрасывается. По-английски переключатель называется radio button, т.е. радиокнопка (по аналогии со старыми автомобильными приемниками, в которых при нажатии кнопки некоторой радиостанции ранее нажатая кнопка выскакивала).


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


Как и в случае с флажками, кнопку переключателя можно выбрать заранее с помощью атрибута CHECKED. Если в одной группе кнопок вы присвоите атрибут CHECKED сразу нескольким кнопкам, то при открытии страницы будет отмечена только последняя кнопка в группе. Вот пример кода и образец его выполнения: 


<P>>Ваш месячный доход:<br>
<INPUT TYPE="radio" NAME="income" value="100">$100<br>
<INPUT TYPE="radio" NAME="income" value="250">$250<br>
<INPUT TYPE="radio" NAME="income" value="500">$500++<br>
</p>


Ваш месячный доход:
$100
$250
$500++


Скрытые поля


Существует такой тип поля, от которого, на первый взгляд нет пользы. Скрытые поля могут содержать данныекоторые пользователь не может изменить. Более того, скрытое поле вообще не отображается на странице. Однако данные, записанные в этом поле, существуют и передаются броузеру со всеми остальными данными. А броузер, в свою очередь, передает их серверу. Для того чтобы создать скрытое поле, вы должны указать атрибут TYPE со значением hidden. Кроме этого атрибута у скрытого поля могут быть атрибуты NAME и VALUE. Создается скрытое поле так:


<INPUT TYPE="hidden" NAME="name" value="value">


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


Немного о HTTP, методах GET и POST.


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

Немного о HTTP


Сервер принимает три типа запросов: GET, POST и HEAD. Запрос программы к Web-серверу выглядит следующим образом:


GET /index.html HTTP/1.0


Первая часть, в данном случае GET, - это метод запроса, вторая, index.html, - запрашиваемый URL, третья, HTTP/1.0, - протокол, используемый клиентом.


Два основных метода запроса - это GET и POST. Это те самые методы которые доступны вам при создании формы. Метод HEAD редко используется броузером, поскольку он запрашивает только заголовок ответа, а тело ответа в таком случае не передается. Например, для проверки того, не изменилась ли страница, броузер может запросить заголовок, но при этом не порождается полноценный обмен данными.

Метод GET


По умолчанию при запросе используется метод GET. Метод POST используется только тогда, когда это явно указано в запросе формы. Для CGI-программиста очень важно понимать, что при запросе методом GET данные формы передаются серверу вместе с URL. Web-серверы, поддерживающие CGI, копируют эти данные в переменную окружения с именем QUERY_STRING. После этого забота о получении данных из переменной окружения и их обработке возлагается на CGI-программу.


URL со строкой запроса выглядит так:


http://www.domen-name.com/login.pl?nick=maks&psw=parol


Знак ? отделяет строку запроса от собственно URL ресурса; nick и psw - переменные передаваемые серверу, maks и parol - их значения соответственно.

Метод POST


Метод POST используется тогда, когда это явно указано в атрибуте формы METHOD. В отличии от метода GET, POST помещает данные не в URL, а в тело запроса. Запрос POST во многом похож на ответ HTTP. Первая строка представляет собой стандартный запрос HTTP, в котором указан метод POST. В ней могут быть необходимые дополнительные заголовки, отделяемые от тела запроса пустой строкой.


Тело запроса при использовании метода POST передается программе как стандартный поток ввода.

Выбор между GET и POST


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


Рассмотрим несколько ситуаций, когда есть смысл предпочесть метод GET или POST.


  • Если вы хотите, чтобы ваша программа вызывалась с помощью ссылки, предпочтение следует отдать методу GET.

  • Если вы не хотите, чтобы аргументы, передаваемые вашей программе, записывались в файл отчета сервера, используйте метод POST. Например, если форма требует указать имя пользователя и пароль, вы вряд ли захотите, чтобы имена и пароли сохранялись в файле отчета. Кроме того, не разумно передавать пароль как часть URL.

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

  • Если ваша форма содержит файловое поле, используйте метод POST. Кроме того, в этом случае нужно установить значение атрибута ENCTYPE в multipart/form-data.

 

Хостинг