Поле ввода имени файла отличается от обычного поля ввода значением атрибута 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 — сброшен:
Ext.get("updates"). on("click", function() { var htelEmail = Ext.getDom("email"); htelEmail.disabled = this.checked;
});
Здесь мы привязываем к флажку updates функцию — обработчик события click, которую тут же и объявляем. Эта функция делает доступным для посетителя поле ввода email, если флажок установлен, и недоступным — если он сброшен. Наша задача упрощается тем, что переменная this, доступная в теле функции- обработчика события и хранящая элемент Web-страницы, в котором обрабатывается событие, хранит этот элемент в виде экземпляра объекта HTMLElement. Спасибо разработчикам Ext Core!
Еще один пример приведен в листинге 20.15.
Листинг 20.15
<FORM ACTION="#">
<P>
<INPUT TYPE="radio" ID="updates_yes" NAME="updates" CHECKED>
Я хочу получать письма со списком обновлений Web-сайта
</P>
<P>
<INPUT TYPE="radio" ID="updates_no" NAME="updates">
Я не хочу получать письма со списком обновлений Web-сайта
</P>
<P>Почтовый адрес: <INPUT TYPE="text" ID="email" NAME="email"></P>
</FORM>
.
Ext.get("updates_yes"). on("click", function() { var htelEmail = Ext.getDom("email"); htelEmail.disabled = this.checked;
});
В листинге 20.15 мы выполняем аналогичные действия, но уже с группой из двух переключателей updates2. Обратим внимание, что мы проверяем состояние только первого переключателя этой группы — updates_yes. В группе может быть включен только один переключатель, и если посетитель включит второй переключатель этой группы, первый переключатель отключится. Фактически группа из двух переключателей ведет себя как флажок.
Свойство selectedIndex задает или возвращает номер выбранного в списке пункта в виде числа. При этом:
— если список позволяет выбирать одновременно только один пункт, возвращается номер именно этого пункта;
— если список позволяет выбирать сразу несколько пунктов, возвращается номер первого выбранного пункта;
— если ни один пункт в списке не выбран, возвращается значение –1.
Понятно, что пользы от свойства selectedIndex будет больше в том случае, если список позволяет выбирать только один пункт одновременно. Хотя в любом случае его можно применять для проверки, выбран ли в списке хоть один пункт. Листинг 20.16 иллюстрирует пример.
Листинг 20.16
<FORM ACTION="#">
<P>
Выполнять поиск по
<SELECT ID="search_in" NAME="search_in">
<OPTION>названиям</OPTION>
<OPTION>ключевым словам</OPTION>
<OPTION SELECTED>названиям и ключевым словам</OPTION>
</SELECT>
</P>
</FORM>
.
var iIndex = Ext.getDom("search_in"). selectedIndex;
if (iIndex == -1) {
//если в списке не выбран ни один пункт, делаем одно
} else {
//если в списке выбран какой-либо пункт, делаем другое
}
Свойство options возвращает коллекцию пунктов списка. Эта коллекция является
экземпляром объекта HTMLOptionsCollection:
var clItems = Ext.getDom("search_in"). options;
Свойство length объекта HTMLOptionsCollection возвращает число элементов в коллекции, т. е. количество пунктов в списке:
var iItemsCount = clItems.length;
Для доступа к отдельным пунктам в этой коллекции мы можем
