Добавил:
Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз: Предмет: Файл:
лекции 2005 / Лекции по ИТС для МП-IV / P6 / Разработка HTML-форм и приложений.doc
Скачиваний:
53
Добавлен:
16.04.2013
Размер:
70.14 Кб
Скачать

Разработка html-форм и приложений.

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

<FORM>

описание элементов

</FORM>

Наиболее важными атрибутами открывающего тега <FORM> являются: ACTION и METHOD, но может быть и атрибут NAME (для ссылки на элементы управления).

ACTION– задает URL того web-приложения, которое будет выполнять обработку данных, введенных пользователем.

METHOD– определяет метод, с помощью которого введенные пользователем данные будут передаваться web-серверу.METHOD = {GET; POST}

GET– через переменное окружение;

POST– информация читается из простого ввода, т.е. обычный операторread.

NAME– задаёт имя формы или элемента управления.

Элементы управления: Создаются с помощью непарного тега <INPUT>.

Тип элемента управления задается в этом теге атрибутом TYPE = {поля ввода: "TEXT"; "PASSWORD"; флажок: "CHECKBOX"; радиокнопка "RADIOBUTTON"; спецкнопки: "SUBMIT"; "RESET"}

NAME - идентификация элемента при помощи имени.

Поле ввода. Параметры поля ввода задаются следующими атрибутами:

VALUE- начальное или текущее значение, отображаемое в поле ввода (набранное пользователем значение);

SIZE- размер поля ввода (кол-во видимых, отображаемых символов поля ввода);

MAXLENGTH- максимальное количество символов, которое можно набрать в поле ввода.

Пример:

<FORM METHOD="GET" ACTION="http://webapp/test.cgi">

Введите пароль:

<INPUT TYPE = "PASSSWORD" SIZE=20 NAME="txt1">

...

</FORM>

На экране:

Введите пароль __________________

Кнопки:

SUBMIT- производит передачу web-серверу данных, введенных пользователем с помощью элементов управления, расположенных в форме;

RESET- сбрасывает все элементы управления в исходное состояние.

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

Пример:

<FORM METHOD="GET" ACTION="http://webapp/test.cgi">

<INPUT TYPE = "PASSSWORD" SIZE=20 NAME="txt1"

VALUE = "master key">

<INPUT TYPE = "SUBMIT" VALUE = "отправить">

<INPUT TYPE = "RESET" VALUE = "очистить">

</FORM>

Разработка web-приложения.

Для расширений функций web-сервера приходится разрабатывать специальные программы, называемые расширениями web-сервераилиweb-приложениями. Существует много типов web-приложений. Одним из таких типов расширений являютсяCGI(CommonGateInterface)приложения, в основе которых лежит использование общего шлюзового интерфейса. Такие приложения подчиняются правилам передачи информации по протоколу HTTP. CGI-приложение получает в соответствии с протоколом HTTP информацию от пользователя, обрабатывает её и возвращает результат обработки в виде HTML-документа, созданного динамически или в виде ссылки на уже существующий документ или другой объект, например, графическое изображение. Отображаемый на экране клиентского компьютера результат называютweb-страницей. CGI - это первый общепринятый интерфейс, считающийся классическим для создания расширений web-серверов. CGI-приложения представляют собой обычное консольное приложение, которое обменивается данными с web-сервером через так называемое переменное окружение выполняющейся программы (параметры).

Недостатки CGI:

Приложение выполняется в своем адресном пространстве, поэтому скорость его взаимодействия с web-сервером невысока;

Осуществлять обмен данными через переменное окружение достаточно неудобно.

Тем не менее, до сих пор широко распространен из-за универсальности (подходит под все известные ОС).

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

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

2) CGI-приложение получает согласно протоколу HTTP данные из элементов формы в виде пар: имя элемента - значение.

3) После обработки полученных данных CGI-приложение создает HTML-документ и помещает его в стандартный поток вывода. Этот сформированный HTML-документ затем автоматически передается web-сервером пользователю и отображается как web-страница на клиентском компьютере.

Способы инициализации CGI-приложения:

1) щелчок мышью по кнопке SUBMIT, которая предусмотрена в форме HTML-документа. Имя и местонахождение CGI-приложения указывается в теге FORM. Например:

<FORM ACTION="http://webapp/webDB.cgi"

METHOD="GET">

2) воспользоваться гиперссылкой.

Гиперссылка на CGI-приложения указывается в теге <А> с помощью атрибута HREF. Например:

<A HREF="http://webapp/webDB.cgi"> RunCGI </A>

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

Для первого способа- Адрес:http://........?доп. информация(т.к. используется METHOD="GET");

Для второго способа- Адрес:http://........ (без ?, простая ссылка).

Если в ссылке указана папка (webapp), то браузер покажет: домашнюю страницу (index.html), а если не найдет, то отобразит содержимое папки. Например:

<A HREF="http://webapp"> RunCGI </A>