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

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

Все они относятся к структурным псевдоклассам.

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

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

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

Листинг 16.13 иллюстрирует пример.

Листинг 16.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>

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

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

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

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

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