HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов - Владимир Дронов

Надпись создают с помощью парного тега <LABEL>:

<LABEL [FOR="<имя элемента управления, к которому относится надпись>"] [TABINDEX="<номер в порядке обхода>"] [ACCESSKEY="<быстрая клавиша>"]><текст надписи>[<элемент управления>]

</LABEL>

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

При первом способе (листинг 20.10) элементу управления, к которому привязывается надпись, дают имя с помощью атрибута тега ID. (Впрочем, любой элемент управления должен иметь имя.) Это имя указывают в качестве значения обязательного в таком случае атрибута FOR тега <LABEL>, создающего надпись.

Листинг 20.10

<FORM ACTION="#">

<P><LABEL FOR="keyword">Найти:</LABEL>

<INPUT TYPE="search" ID="keyword" NAME="keyword" SIZE="40"></P>

</FORM>

При втором способе (листинг 20.11) элемент управления, к которому привязывается надпись, помещают в сам тег <LABEL>, создающий ее, сразу после текста надписи.

Листинг 20.11

<FORM ACTION="#">

<P><LABEL>Найти: <INPUT TYPE="search" ID="keyword" NAME="keyword"

SIZE="40"></LABEL></P>

</FORM>

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

Группа

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

Группу создают с помощью парного тега <FIELDSET>:

<FIELDSET>

<элементы управления, объединяемые в группу>

</FIELDSET>

Видно, что теги, создающие элементы управления, которые должны быть объединены в группу, помещают прямо в тег <FIELDSET>.

Кроме того, в теге <FIELDSET> может присутствовать парный тег <LEGEND>, создающий заголовок группы:

<LEGEND [ACCESSKEY="<быстрая клавиша>"]><текст заголовка></LEGEND>

Текст заголовка помещают прямо внутри этого тега.

Тег <LEGEND> должен помещаться либо сразу же после открывающего тега <FIELDSET>, либо перед закрывающим тегом </FIELDSET>. В первом случае заголовок будет присутствовать на верхней границе группы, во втором случае — на нижней границе. В листинге 20.12 приведен пример группы.

Листинг 20.12

<FORM ACTION="#">

<FIELDSET>

<LEGEND>Найти:</LEGEND>

<P>

<INPUT TYPE="search" ID="keyword" NAME="keyword" SIZE="40">

<INPUT TYPE="button" ID="find" NAME="find" VALUE="Искать!">

</P>

</FIELDSET>

</FORM>

Прочие элементы управления

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

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

Далее, в Web-форме может присутствовать кнопка очистки. При нажатии на такую кнопку все элементы управления в Web-форме получают изначальные значения, заданные в HTML-коде. Значение атрибута TYPE тега <INPUT>, создающего подобную кнопку, должно быть "reset".

Поле ввода имени файла служит для указания имени файла, который будет отправлен серверному приложению (сам файл, а не его имя). Оно состоит из собственно поля ввода и расположенной правее его кнопки Обзор, при нажатии которой на экране появится стандартное диалоговое окно открытия файла Windows, в котором можно выбрать отправляемый файл.

Поле ввода имени файла отличается от обычного поля ввода значением атрибута TYPE тега <INPUT> — "file". В теге <INPUT> в этом случае поддерживаются атрибуты ACCESSKEY, AUTOFOCUS, DISABLED, SIZE и TABINDEX.

Графическая кнопка отправки данных — это графическое изображение, при щелчке на котором Web-форма запускает процесс отправки введенных данных серверному приложению. Фактически это кнопка отправки данных, в качестве которой выступает изображение.

Графическую кнопку отправки данных создают с помощью тега <INPUT>. Значение атрибута TYPE этого тега должно быть "image". Атрибут тега SRC задает интернет- адрес файла с графическим изображением, а атрибут тега ALT — текст замены (подробнее см. в главе 4). Также поддерживаются атрибуты ACCESSKEY, AUTOFOCUS, DISABLED и TABINDEX тега <INPUT>.

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

Скрытое поле создают с помощью тега <INPUT>. Значение атрибута TYPE этого тега должно быть "hidden". Атрибут VALUE тега <INPUT> задает хранимое в скрытом поле значение.

Специальные селекторы CSS, предназначенные для работы с элементами управления

Язык CSS предоставляет несколько специальных селекторов, с помощью которых можно неявно привязать стиль к элементам управления на основе их состояния. Все они относятся к структурным псевдоклассам.

-:enabled — привязывает стиль к элементам управления, доступным для посетителя.

-:disabled — привязывает стиль к элементам управления, недоступным для посетителя.

-:checked — привязывает стиль к установленным флажкам и переключателям. Листинг 20.13 иллюстрирует пример.

Листинг 20.13

:disabled { color: #B1BEC6 }

:checked { font-weight: bold }

.

<FORM ACTION="#">

<P>

<INPUT TYPE="radio" ID="updates_yes" NAME="updates" CHECKED>

Я хочу получать письма со списком обновлений Web-сайта

</P>

<P>

<INPUT TYPE="radio" ID="updates_no" NAME="updates" CHECKED >

Я не хочу получать письма со списком обновлений Web-сайта

</P>

<P>Почтовый адрес: <INPUT TYPE="text" ID="email" NAME="email" DISABLED></P>

</FORM>

Работа с элементами управления

Толку от Web-формы немного, если вводимые в ней данные никак не обрабатываются. Поскольку мы занимаемся исключительно клиентскими интернет-технологиями, обрабатывать данные мы будем в Web-сценариях.

А чтобы обработать в Web-сценариях данные, введенные в элементы управления, мы должны их как-то получить оттуда. Кроме того, нам пригодится возможность манипулировать элементами управления из Web-сценариев: делать их доступными и недоступными, устанавливать и сбрасывать флажки, включать переключатели, выбирать пункты списков и пр. И, поскольку львиная доля Web-сценариев — это обработчики событий, мы должны знать, какие события поддерживают элементы управления и когда они возникают.

Вот об этом и пойдет сейчас разговор.

Свойства и методы объекта HTMLElement, применяемые для работы с элементами управления

Сначала мы рассмотрим самые полезные для нас свойства и методы объектов Web-обозревателя, представляющих различные элементы управления. Запомним: это именно объекты Web-обозревателя, производные от объекта HTMLElement.

Свойство disabled позволяет сделать элемент управления доступным или недоступным для посетителя. Значение true этого свойства делает элемент управления доступным, значение false — недоступным. Листинг 20.14 иллюстрирует пример.

Листинг 20.14

<FORM ACTION="#">

<P>

<INPUT TYPE="checkbox" ID="updates" NAME="updates">

Я хочу получать письма со списком обновлений Web-сайта

</P>

<P>Почтовый адрес: <INPUT TYPE="text" ID="email" NAME="email"></P>

</FORM>

.

Ext.getDom("email"). disabled = false;

Здесь мы с помощью метода getDom получаем экземпляр объекта HTMLElement, представляющий поле ввода почтового адреса email, и делаем его недоступным для ввода, присвоив свойству disabled значение false.

Свойство readOnly позволяет сделать элемент управления доступным или недоступным для ввода. Значение true этого свойства делает элемент управления недоступным для ввода, значение false — доступным:

Ext.getDom("email"). readOnly = false;

Свойство value задает или возвращает значение, введенное в поле ввода или область редактирования, в виде строки:

var sEmail = Ext.getDom("email"). value;

Свойство checked позволяет получить или задать состояние флажка или переключателя — установлен он или нет. Значение true обозначает, что флажок или переключатель установлен, значение false — сброшен: