HTML 5, CSS 3 и Web 2.0. Разработка современных 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.