Стандарт HTML требует, чтобы каждый элемент управления имел уникальное в пределах Web-формы имя. Это нужно для успешного формирования пар данных перед отправкой их серверному приложению.
Назначение 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-сценария, привязать к нему именованный стиль или стилевой класс и задать для него встроенный стиль.
Ранее было сказано, что на основе данных, введенных в элементы управления, Web-форма, в которой эти элементы управления находятся, сформирует пары вида
<имя элемента управления>=<введенные в него данные>, которые отправит серверному приложению. Так вот, имя элемента управления, которое будет фигурировать в этих парах, задается атрибутом тега NAME — не ID! Это обязательный атрибут тега — если его не указать, при работе с элементом управления возможны проблемы.
Что касается атрибута тега ID, то он задает имя, под которым элемент управления будет доступен в Web-сценариях, а также имя именованного стиля. Собственно, об этом мы уже знаем.
Обычно для каждого элемента управления атрибутами тега ID и NAME указывают одно и то же имя — просто чтобы не ломать голову и устранить разнобой в именах. Хотя это и не обязательно.
Все элементы управления HTML представляют собой встроенные элементы Web-страницы (см. главу 3).
Теперь рассмотрим все элементы управления HTML и особенности их создания.
Поле ввода
Поле ввода — наиболее распространенный элемент управления в Web-формах — создается с помощью одинарного тега <INPUT>:
<INPUT [TYPE="text"] [VALUE="<изначальное значение>"] [SIZE="<размер>"] [MAXLENGTH="<максимальное количество символов>"] [DISABLED] [TABINDEX="<номер в порядке обхода>"] [ACCESSKEY="<быстрая клавиша>"] [READONLY] [AUTOFOCUS]>
Атрибут тега TYPE, как уже говорилось, задает тип элемента управления. Значение "text" указывает Web-обозревателю создать именно поле ввода. Поле ввода также создается, если атрибут тега TYPE не указан (как уже говорилось, он необязательный).
Необязательный атрибут тега VALUE задает значение, которое должно присутствовать в поле ввода изначально. Если этот атрибут не указан, поле ввода не будет содержать ничего.
Необязательный атрибут тега SIZE задает длину поля ввода в символах. Если он не указан, длина поля ввода будет зависеть от Web-обозревателя.
Необязательный атрибут тега MAXLENGTH задает максимальный размер строки, которую можно ввести в это поле ввода, в символах. Если этот атрибут тега не указан, в поле ввода можно будет ввести строку неограниченного размера.
Необязательные атрибуты тега TABINDEX и ACCESSKEY задают, соответственно, номер в порядке обхода и "горячую" клавишу для доступа к элементу управления. Они знакомы нам по гиперссылкам (см. главу 6).
Атрибут тега без значения DISABLED позволяет сделать поле ввода недоступным для посетителя; оно будет отображаться серым цветом, и посетитель не сможет даже его
