Дронов Владимир
Шрифт:
Назначение Web-форм и элементов управления. Серверные приложения
Стандарт HTML поддерживал Web-формы и элементы управления еще до появления Web-сценариев и языка JavaScript. Но зачем?
Существует множество Web-сайтов, которые позволяют посетителю ввести какие- либо данные и получить результат их обработки: поисковые машины, почтовые Web-сервисы, интернет-магазины, интернет-опросники, социальные сети и пр.
Функциональность таких Web-сайтов реализуется с помощью особых программ, которые работают на серверном компьютере совместно с Web-сервером, — серверных приложений. Именно они обрабатывают полученные от посетителя Web-сайта данные и выдают результат в виде обычной Web-страницы. Именно для них в HTML предусмотрена возможность создания Web-форм и элементов управления — чтобы посетитель мог ввести данные, которые потом обработает серверное приложение.
Вот основная схема работы серверного приложения.
— Посетитель вводит в элементы управления, расположенные в Web-форме на Web-странице, нужные данные.
— Введя данные, посетитель нажимает расположенную в той же Web-форме особую кнопку — кнопку отправки данных.
— Web-форма кодирует введенные в нее данные и отправляет их серверному приложению, расположенному по указанному интернет-адресу.
— Web-сервер перехватывает отправленные данные, запускает серверное приложение и передает данные ему.
— Серверное приложение обрабатывает полученные данные.
— Серверное приложение формирует Web-страницу с результатами обработки данных посетителя и передает ее Web-серверу.
— Web-сервер получает сформированную серверным приложением Web-страницу и отправляет ее посетителю.
Для того чтобы успешно подготовить введенные посетителем данные и отправить их серверному приложению, Web-форма должна "знать" значения трех параметров.
— Интернет-адрес серверного приложения. Это обычный интернет-адрес, указывающий на файл серверного приложения, вида http://www.somesite.ru/apps/app.exe.
— Метод отправки данных, указывающий вид, в котором данные будут отправлены. Таких методов HTML поддерживает два.
Метод GET формирует из введенных посетителем данных набор пар вида
<имя элемента управления>=<введенные в него данные>. (Ранее уже говорилось, что каждый элемент управления обязательно должен иметь уникальное в пределах Web-формы имя.) Эти пары добавляются справа к интернет- адресу серверного приложения, отделяясь от него символом? (вопросительный знак); сами пары разделяются символами & (амперсанд). Полученный таким образом интернет-адрес отправляется Web-серверу, который извлекает из него интернет-адрес серверного приложения и сами данные.
Метод POST также формирует из введенных данных пары вида <имя элемента управления>=<введенные в него данные>. Но отправляет он их не в составе интернет-адреса, а вслед за ним, в качестве дополнительных данных.
— Метод кодирования данных. Он актуален только при отправке данных методом POST; для метода GET его можно не указывать.
Все это имеет смысл только в том случае, если мы создаем Web-форму для отправки данных серверному приложению. Поскольку книга посвящена исключительно клиентским интернет-технологиям, мы не будем подробно рассматривать кодирование и пересылку данных. Эти сведения можно найти в любой книге по HTML, благо от версии к версии этого языка они практически не меняются.
ВНИМАНИЕ!
Далее мы будем рассматривать только те возможности Web-форм и элементов управления, которые полезны исключительно при клиентском Web-программировании. Возможности, необходимые для взаимодействия с серверными приложениями, мы опустим.
Создание Web-форм и элементов управления
Настала пора рассмотреть средства языков HTML и CSS, предназначенные для создания Web-форм и элементов управления, и возможности объектов Web-обозревателя и библиотеки Ext Core для работы с ними. Их довольно много.
Создание Web-форм
Для создания Web-формы применяется парный тег <FORM>, внутри которого помещают теги, формирующие элементы управления, входящие в эту Web-форму:
<FORM>
<теги, формирующие элементы управления>
</FORM>
Web-форма ведет себя как блочный элемент Web-страницы. (О блочных элементах см. главу 2.)
Тег <FORM> поддерживает обязательный атрибут ACTION, который указывает интернет-адрес серверного приложения. Если Web-форма служит для ввода данных, предназначенных для обработки Web-сценарием, в качестве значения этого атрибута тега указывают "пустой" интернет-адрес #:
<FORM ACTION="#">
.
</FORM>
Создание элементов управления
Большинство элементов управления HTML создают посредством одинарного тега <INPUT>. Какой именно элемент управления следует создать, указывают с помощью необязательного атрибута TYPE этого тега. Некоторые элементы управления, такие как область редактирования и списки, создают с помощью других тегов. Мы обязательно их рассмотрим.
Все эти теги поддерживают уже знакомые нам атрибуты ID, CLASS и STYLE. Следовательно, мы можем дать элементу управления имя, по которому сможем получить к нему доступ из Web-сценария, привязать к нему именованный стиль или стилевой класс и задать для него встроенный стиль.