Создание 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 позволяет сделать поле ввода недоступным для посетителя; оно будет отображаться серым цветом, и посетитель не сможет даже его активизировать. Если этот атрибут присутствует в теге, поле ввода недоступно, если отсутствует — доступно.
Атрибут тега без значения READONLY позволяет сделать поле ввода доступным только для чтения; при этом посетитель все-таки сможет активизировать это поле, выделить содержащийся в нем текст и скопировать его в Буфер обмена. Если этот атрибут тега присутствует, поле ввода будет доступно только для чтения, если отсутствует — доступно и для чтения, и для ввода.
Если атрибут тега без значения AUTOFOCUS присутствует, данное поле ввода будет автоматически активизировано при открытии Web-страницы. Если же он отсутствует, поле ввода активизировано не будет и посетителю придется его активизировать щелчком мышью или клавишами <Tab> или <Shift>+<Tab>.
ВНИМАНИЕ!
Атрибут тега AUTOFOCUS можно указывать только для одного элемента управления на всей Web-странице.
Листинг 20.1
<FORM ACTION="#">
<P>Имя: <INPUT TYPE="text" ID="name1" NAME="name1" SIZE="20"
AUTOFOCUS></P>
<P>Фамилия: <INPUT TYPE="text" ID="name2" NAME="name2" SIZE="30"></P>
</FORM>
В листинге 20.1 мы создаем Web-форму с двумя полями ввода: name1 длиной 20 символов, автоматически активизирующееся при открытии Web-страницы, и name2 длиной 30 символов. Оба поля ввода имеют надписи, представляющие собой обычный текст и расположенные перед ними.
Обратим внимание, что для размещения элементов управления в Web-форме мы использовали абзацы. Вообще, для этого можно применять любые элементы Web- страниц из уже знакомых нам: списки, таблицы, контейнеры и пр.
Поле ввода пароля
Поле ввода пароля ничем не отличается от обычного поля ввода за тем исключением, что вместо вводимых символов в нем отображаются точки. Такие поля ввода широко применяют для запроса паролей и других конфиденциальных данных.
Поле ввода пароля также создается с помощью одинарного тега <INPUT>:
<INPUT TYPE="password" [VALUE="<изначальное значение>"] [SIZE="<размер>"] [MAXLENGTH="<максимальное количество символов>"] [TABINDEX="<номер в порядке обхода>"] [ACCESSKEY="<быстрая клавиша>"] [DISABLED] [READONLY] [AUTOFOCUS]>
Значение "password" атрибута тега TYPE указывает Web-обозревателю создать поле ввода пароля. Остальные атрибуты нам уже знакомы по обычному полю ввода.
Листинг 20.2
<FORM ACTION="#">
<P>Имя: <INPUT TYPE="text" ID="login" NAME="login" SIZE="20" AUTOFOCUS></P>
<P>Пароль: <INPUT TYPE="password" ID="password" NAME="password" SIZE="20"></P>
</FORM>
В листинге 20.2 мы создаем Web-форму с обычным полем ввода и полем ввода пароля. Первое — login, длиной 20 символов, будет автоматически активизироваться при открытии Web-страницы. Второе — password, длиной также 20 символов.
Поле ввода значения для поиска
Поле ввода значения для поиска появилось в HTML 5. Оно ничем не отличается от обычного поля ввода за тем исключением, что из введенного в него значения автоматически удаляются переводы строк.
Поле ввода значения для поиска также создается с помощью одинарного тега
<INPUT>:
<INPUT TYPE="search" [VALUE="<изначальное значение>"] [SIZE="<размер>"] [MAXLENGTH="<максимальное количество символов>"] [TABINDEX="<номер в порядке обхода>"] [ACCESSKEY="<быстрая клавиша>"] [DISABLED] [READONLY] [AUTOFOCUS]>
Значение "search" атрибута тега TYPE указывает Web-обозревателю создать поле ввода значения для поиска. Остальные атрибуты нам уже знакомы по обычному полю ввода (листинг 20.3).
Листинг 20.3
<FORM ACTION="#">
<P>Найти: <INPUT TYPE="search" ID="keyword" NAME="keyword"
SIZE="40"></P>
</FORM>
Область редактирования
Область редактирования создается парным тегом <TEXTAREA>:
<TEXTAREA [ROWS="<высота>"] [COLS="<ширина>"] [WRAP="off|soft|hard"] [TABINDEX="<номер в порядке обхода>"] [ACCESSKEY="<быстрая клавиша>"] [DISABLED] [READONLY] [AUTOFOCUS]><изначальное значение>
</TEXTAREA>
Значение, которое должно изначально присутствовать в области редактирования, помещается внутрь тега <TEXTAREA>. Это должен быть текст без всяких HTML-тегов.
Необязательный атрибут тега ROWS задает высоту области редактирования в строках. Если он не указан, высота области редактирования будет зависеть от Web- обозревателя.
