Лабораторная работа № 5 Элементы управления в гипертекстовом документе
Стандарт языка HTML предоставляет возможность разработчику средства создания интерфейса для обмена информацией между клиентом (программой просмотра – броузером) и сервером (удаленным компьютером). Для этого в HTML-документе используются метки <FORM> и </FORM>, которые являются контейнером для элементов ввода информации <INPUT>, <TEXTAREA>, <SELECT> и <OPTION>.
Параметрами для метки <FORM> являются:
ACTION = ”адрес” (адрес программы обработки, в случае его отсутствия используется базовый адрес);
METHOD = способ передачи данных (GET – путем добавления данных к адресу, указанному параметром ACTION или POST – через потоки ввода/вывода);
TARGET = ”имя окна” (если данные направляются в документ с фреймовой структурой).
На форме можно разместить следующие элементы (объекты) следующих типов:
button – кнопка, обычно используемая для запуска сценария (скрипта);
checkbox – квадратное окошко для ввода булевского параметра (галочка означает YES, ее отсутствие – NO);
text – окошко для ввода одной строки символов;
password – то же, что и объект text, но при вводе символов вместо них отображаются звездочки;
reset – кнопка сброса всех элементов в исходное положение;
submit – кнопка, нажатие которой инициирует передачу данных по адресу, указанному параметром ACTION в метке <FORM>.
Каждый объект (элемент) формы имеет набор свойств и связанных с ним методов обработки событий. Основным событием для находящихся в фокусе объектов button, checkbox, reset и submit является нажатие левой кнопки мыши (Click). Имена сценариев (скриптов), которые должны выполняться при наступлении этого события, указываются в метке описания объекта с помощью параметра OnClick= «имя скрипта». Для объектов text и password событием является получение фокуса (Focus). Соответствующий параметр, запускающий скрипт, в этом случае имеет вид OnFocus= «имя скрипта».
Сценарии (скрипты) включаются в текст HTML-документа с помощью MeTOK<SCRIPT> и </SCRIPT>. Параметром для этой метки является название языка, на котором пишутся скрипты. Это могут быть языки JavaScript или VBScript, например:
<SCRIPT LANGUAGE = “JavaScript” >
…………….
……………
</SCRIPT>
В
качестве примера рассмотрим задачу
создания HTML-документа,
при просмотре которого на экране
броузера будет отображаться
окно для ввода пароля и надпись: «Введите
пароль». Кроме того, на
форме имеется две кнопки, одна с надписью
«Проверка пароля» и
«Войти в систему» (см. рис.15). Первая
кнопка типа button,
вторая
– типа submit.
Назначение
кнопок следующее. При нажатии первой
кнопки запускается программа обработки
этого события – проверяется
строка символов, введенное в окно
пароля. Если эта строка пустая, выводится
сообщение «Введите сначала пароль»,
если
строка не совпадает со строкой «123»
(правильный пароль), выводится
сообщение «Пароль неверен» и, наконец,
если введена строка
«123», выводится сообщение «Пароль введен
верно». Кроме
того, сценарий обработки предусматривает
изменение значения переменной
XX
со
значения 0 на 1 в случае, если пароль
введен правильно.
Значение этой переменной анализируется
вторым сценарием, который запускается
при нажатии кнопки «Войти в систему».
Если оно равно 1, то посылается сообщение
по локальному адресу
«mainfraim.htm»,
в
результате чего открывается созданный
ранее HTML-документ
(см. рис. 13), в противном случае в
ыводится
сообщение:
«Попытка несанкционированного доступа».
Рис. 15. Форма с элементами управления
Текст HTML-документа с формой приведен ниже.
<HTML>
<BODY>
<SCRIPT LANGUAGE = “JavaScript” >
var xx = 0
function pr1()
{
if (Form1.pass.value = = “”) { аlert (“Сначала введите пароль!”); return; }
if (Forml.pass.value ! = “123” ) { аlert (“Пароль неверен!”); return;}
if (Forml.pass.value = = “123”) { аlert (“Пароль введен верно”); xx=1; return; }
}
function pr2()
{
if (xx= =0) alert ( “Попытка войти в систему при неверном пароле! “);
}
</SCRIPT>
<FORM NAME = “Form1” METHOD = ”Get” ACTION = “mainframe.htm”>
<Р>Введите Ваш пароль: <INPUT TYPE = “password” NAME = “pass”>
<BR>
<HR>
<BR>
<INPUT TYPE = “button” VALUE = “Проверка пароля” onClick = “pr1()”>
<INPUT TYPE = “submit” VALUE = “Войти в систему” onClick = “pr2()”>
</FORM>
</BODY>
</HTML>