ЛабыWeb / Лаб_Web_JS / ЛабРабота9_3КомандКнопки
.docТема «Элементы управления формы - Командные кнопки»
Цель работы: Изучить свойства дескриптора элемента управления Командные кнопки. Кнопки общего типа и подачи запроса.
Теория. В языке HTML предусмотрены два синтаксиса создания кнопок:
♦ с использованием дескриптора <INPUT>:
<INPUT TYPE='тип_кнопки' VALUE='надпись'>
♦ с использованием специального дескриптора: <ТИП_КН0ПКИ>Надпись</ТИП_КНОПКИ>
Второй синтаксис предпочтительнее, так как дает возможность форматировать надписи кнопки, а также создавать графические кнопки.
Различают следующие типы кнопок:
-
<BUTTON> — кнопка общего вида;
-
<SUBMIT> — кнопка подачи запроса;
-
<RESET> — кнопка сброса.
А) Кнопки подачи запроса и сброса являются стандартными для форм Web-страниц. Обозреватели автоматически снабжают эти кнопки стандартными надписями и функциями обработки событий:
♦ < INPUT TYPE=' submit' > — создает кнопку Подача запроса, хотя текст ярлыка кнопки меняться в зависимости от типа и языка обозревателя. По умолчанию выполняет передачу текущих данных формы в соответствии с установками атрибутов в дескрипторе <FORM> (см. лабе «Создание формы»). Чтобы изменить стандартную надпись на кнопке, присвойте новый текст атрибуту VALUE.
♦ <INPUT TYPE= ‘ reset' > — создает кнопку Сброс. Щелчок на этой кнопке очищает все поля ввода в форме.
Б)Кнопки общего вида используют для вызова в форме нестандартных пользовательских функций, как например: выполнение вычислений и проверка правильности данных в полях ввода. Безусловно, начать работу нужно с создания сценария выполнения операции, а уже затем создавать кнопку под этот сценарий.
Информацию о назначении кнопки можно сообщить с помощью:
-
текста в форме в непосредственной близости от кнопки;
-
надписи на кнопке, присвоенной атрибуту VALUE или введенной между парой дескрипторов <BUTTON>...< /BUTTON>;
-
текста всплывающей подсказки, присвоенной атрибуту TITLE.
Назначьте кнопке горячую клавишу. Для этого установите в дескрипторе кнопки атрибут ACCESSKEY.
Пример создания двух одинаковых кнопок ОК:
<INPUT TYPE='button' VALUE='OK'>
<BUTTON>OK</BUTTON>
В кнопках всех типов, а также во всех остальных элементах управления формы, с которыми вы познакомились, можно устанавливать атрибут DISABLED. В случае установки этого атрибута элемент управления отображается в окне обозревателя, но остается недоступным пользователю. Данный атрибут затем можно сбросить с помощью пользовательского сценария, назначенного какому-либо событию.
Пример 1. Форма с пользовательской кнопкой «Заполнить» и «Очистить»
Пример
2.
Форма с командными кнопками
Щелчок
на кнопке «Версия» ни к чему не приведет,
так как этой кнопке пока не назначена
никакая функция обработки события.
Пример 3.Форма с одной кнопкой, вызывающей стандартное информационное окно Windows
Пример 4. Web страница с гиперссылкой на вызов информационного окна
<html><body>
<a href="JavaScript:alert('Внимание!!!');">Кликни здесь</a>
</body></html>
Задание 1. Набрать пример 1 и посмотреть, как работают кнопки. Изменить текст выводимый при нажатии кнопки «Заполнить» на свою Фамилию и имя.
Задание 2. Оформить пример2 как html-файл и посмотреть какая форма выдается на экран. Внесите изменения в код примера2, разблокировав кнопку «Подача запроса». Добавьте в форму еще одну кнопку общего вида со своим названием.
Задание 3. Наберите код примера3, просмотрите и разберитесь как он работает. Измените текст, выводимый в информационном окне. Добавьте в код предыдущего задания информационное окно, появляющееся после нажатия на вами добавленную кнопку.