Выбор характеристик издания
Предположим, читателю предлагается заполнить анкету, в которой требуется указать название любимого издания и выбрать из предложенного списка характеристики, которые присущи рассматриваемому изданию.
|
|
|
Рис 4. Пример обработки анкеты читателя |
Для задания характеристик издания можно воспользоваться флажком. Пользователь устанавливает флажки для тех свойств, которыми, по его мнению, обладает издание. Обработка анкеты будет состоять в том, что выбранные свойства будут отражены в поле ввода многострочного текста (рис. 4).
При щелчке мышью по флажку возникает событие click, обработка которого состоит в вызове функции set с одним атрибутом, принимающим значение атрибута value флажка. Для формирования строки результата служит глобальная переменная s; к имеющемуся значению добавляется значение параметра функции и помещается в текстовое поле. Если нажать на кнопку Отмена, то очистятся все поля формы. Однако следует позаботиться о том, чтобы значение переменной s изменилось на начальное. Значение атрибута реакции на событие click при щелчке по кнопке Отмена задается оператором присваивания, обеспечивающим начальные условия.
HTML-код представлен в листинге 15.
Листинг 15. Анкета читателя <HTML> <HEAD> <TITLE>Анкета читателя</TITLE> <script> var s="Bac привлекает: \r\n" function set(vch) { s=s+vch + "\r\n"; document.form1.area.value=s } </script> </HEAD> <BODY bgcolor="#F8F8FF"> <CENTER> <H3 align="center">Анкета читателя</H3> <FORM name="form0"> <h4>Введите название любимого журнала или газеты</h4> <input type="text" name="n1" size=45><br> </FORM> <FORM name="form1"> <h4>Что Вас привлекает в издании?</h4> <TABLE border=3 align=center> <TR> <TD><img src="ris.gif" align="center"></TD> <TD><input type="checkbox" name="m1" value="Cтиль подачи материала" onClick="set(form1.elements[0].value)"> Стиль подачи материала<br>
<input type="checkbox" name="m2" value="Достоверность информации" onClick="set(form1.elements[1].value)"> Достоверность информации<br>
<input type="checkbox" name="m3" value="Дизайн и оформление" onClick="set(form1.elements[2].value)"> Дизайн и оформление<br>
<input type="checkbox" name="m4" value="Kaчecтво информации" onClick="set(form1.elements[3].value)"> Качество информации<br>
<input type="checkbox" name="m5" value="Репутация издания" onClick="set (form1.elements[4].value)"> Репутация издания<br>
<input type="checkbox" name="m6" value="Репутация издания" onClick="set(form1.elements[5].value)"> Регулярность издания<br> </TD></TR></TABLE>
<textarea name="area" cols=35 rows=7></textarea><br> <input type="reset" value="Отмена" onclick= "s='Bac привлекает: \r\n'"> </FORM> </BODY> </HTML>
Если флажок получает фокус, то происходит событие FOCUS, в качестве значения атрибута обработки события, как и в предыдущем случае, может быть вызов функции set:
<input type="checkbox" name="ml" value="Стиль подачи материала" onFocus="set(form1.elements[0].value)">Стиль подачи материала<br>
И, наконец, потеря объектом фокуса вызовет событие Blur, обработка которого может быть произведена аналогичным способом:
<input type="checkbox" name="m1" value="Стиль подачи материала" onBlur="set(form1.elements[0].value)">Стиль подачи материала<br>
Объект checkbox обладает свойствами value, name, type, которые соответствуют атрибутам тега, описывающего флажок. Функция set получает в качестве параметра объект checkbox и формирует для выбранного флажка значения соответствующих ему свойств так, как показано на рис. 5.
|
|
|
Рис 5. Исследование свойств флажка |
В представленном HTML-коде (листинг 16) обратите внимание на фактический атрибут вызова функции set при обработке события click.
Листинг 16. Анкета читателя. Свойства флажка <HTML> <HEAD> <TITLE>Анкета читателя </TITLE> <script> var s="Свойства выбранного флажка: \r\n" function set(objch) {s+="свойство value: "+objch.value +"\n"+ "свойство name: "+objch.name +"\n"+ "свойство type: "+objch.type +"\n" document.form1.area.value=s} </script> </HEAD> <BODY bgcolor="#F8F8FF"> <CENTER> <H3 align="center">Aнкета читателя</H3> <FORM name="form0"> <h4>Введите название любимого журнала или газеты</h4> <input type="text" name="n1" size=45><br> </FORM> <FORM name="form1"> <h4>Что Вас привлекает в издании?</h4> <TABLE border=3 align=center> <TR> <TD><img src="ris.gif" align="center"></TD> <TD><input type="checkbox" name="m1" value="Cтиль подачи материала" onClick="set(form1.elements[0])"> Стиль подачи материала<br>
<input type="checkbox" name="m2" value="Достоверность информации" onClick="set(form1.elements[1])"> Достоверность информации<br>
<input type="checkbox" name="m3" value="Дизайн и оформление" onClick="set(form1.elements[2])"> Дизайн и оформление<br>
<input type="checkbox" name="m4" value="Качество информации" onClick="set(form1.elements[3])"> Качество информации<br>
<input type="checkbox" name="m5" value="Репутация издания" onClick="set(form1.elements[4])"> Репутация издания<br>
<input type="checkbox" name="m6" value="Регулярность издания" onClick="set(form1.elements[5])"> Регулярность издания<br> </TD></TR></TABLE> <textarea name="area" cols=35 rows=7></textarea><br> <input type="reset" value="Отмена" onClick="s='Свойства выбранного флажка: \r\n'"> </FORM> </BODY> </HTML>
В качестве параметра в функцию set можно передать номер флажка, а уже в самой функции определить свойства выбранного элемента. В этом случае функция set может быть описана следующим образом:
function set(i) { var d=document.forms[1].elements[i-1] s+="свойство value: "+d.value +"\n"+ "свойство name: "+d.name +"\n"+ "свойство type: "+d.type +"\n" document.forms[1].elements[6].value=s}
Обратите внимание, что в документе определены две формы. Одна содержит текстовое поле ввода названия журнала, а во второй форме расположены флажки, текстовое поле и кнопка сброса.