Текстовая область
Текстовая область определяется с помощью команды <TEXTAREA>, эта команда обязательно имеет закрывающую — </TEXTAREA>. Существует разница между текстовым полем и текстовой областью: текстовая область позволяет вводить несколько строк текста.
Атрибуты команды TEXTAREA:
-
NAME. Символическое имя поля ввода.
-
ROWS. Число строк в поле ввода (высота).
-
COLS. Число столбцов в поле ввода (ширина).
TEXTAREA имеет полосы прокрутки, так что может быть введено любое количество текста. Но в этом тексте нельзя использовать команды HTML! Текст между открывающей и закрывающей командами <TEXTAREA> используется как значение по умолчанию. Для создания новой строки в текстовой области можно использовать специальные служебные символы \n\r (перевод строки и возврат курсора)
Свойства переключателя
В следующем примере проверяется правильность обработки данных элемента управления «переключатель». Объект radio имеет свойства name, type, value. Событие Focus возникает, когда элемент формы получает фокус, т.е. попросту говоря мы щелкаем мышкой по переключателю. При получении фокуса переключателем в текстовой области отображаются значения свойства для выбранного переключателя.
Необходимо написать сценарий, в котором для каждого переключателя выводятся значения соответствующих ему свойств, как на рис. 2.
|
|
|
Рис 2. Свойства переключателя |
Группа элементов состоит из четырех переключателей, пятый элемент формы — поле ввода многострочного текста. При выполнении сценария формируется строка s, содержащая требуемые значения. Фактическим параметром функции обработки события test является элемент формы — переключатель, а не значение атрибута value выбранного переключателя, как в предыдущем примере. Далее в сценарии для получения свойств переключателя используются конструкции obj.value, obj.name, obj.type. В этом примере в качестве значения атрибута value в переключателе применяется строковый литерал.
HTML-код приведен в листинге 13.
Листинг 13. Свойства выбранного элемента-переключателя
<HTML> <HEAD> <TITLE>Данные из формы типа "переключатель". Событие Focus</TITLE> <script language="JavaScript"> function test(obj) { var s="свойство value: " + obj.value + "\n\r" + "свойство name: " + obj.name + "\n\r" + "свойство type: " + obj.type form1.elements[4].value=s } </script> </HEAD> <BODY> <FORM name="form1"> Выберите форму витража<br> <input type="radio" name="fv" value="прямоугольник" onFocus=test(form1.elements[0])>прямоугольник<br> <input type="radio" name="fv" value="квaдpaт" onFocus=test(form1.elements[1])>квадрат<br> <input type="radio" name="fv" value="тpeyгoльник" onFocus=test(form1.elements[2])>треугольник<br> <input type="radio" name="fv" value="кpyг" onFocus=test(form1.elements[3])>круг<br> Тест: <br> <textarea name="res" cols=55 rows=5></textarea><br> <input type="reset" value="Отменить"> </FORM> </BODY> </HTML>
Расписание занятий
Напишем сценарий, в результате работы которого при попадании курсора мыши на элемент списка, в текстовой области появляется некоторое сообщение.
Пусть список представляет собой расписание занятий в определенный день, а текст сообщения содержит комментарий к каждому занятию. Вид документа приведен на рис. 3.
|
|
|
Рис 3. Расписание занятий |
Расписание занятий задается списком. В теге <LI>, определяющем элемент списка, предусмотрена реакция на два события, связанных с попаданием курсора мыши на элемент списка (onMouseOver) и выход курсора за пределы элемента списка (onMouseOut). При попадании в текстовое поле помещается значение строки. Размещаемая в текстовом поле строка определяется атрибутом функции.
HTML-код документа имеет вид, представленный в листинге 14.
Листинг 14. Свойства выбранного элемента-переключателя <HTML> <HEAD> <TITLE>Расписание занятий </TITLE> <script> var s1="Контрольная работа" var s2='Изменилась аудитория - БФА' var s3='Занятия в компьютерном классе' var s4='Подготовка реферата' var s5='Занятия переносятся на следующую неделю' function sch(s) {document.form1.m1.value=s} function delet () {document.form1.m1.value=''} </script> </HEAD> <BODY bgcolor="#77AAFF"> <Center> <h4>Расписание занятий</h4> <TABLE border=0 cellspacing=5 cellpadding=5> <TR valign=top> <TD align=center> <FORM name ="form1"> <textarea name="m1" cols=35 rows=4></textarea></TD> </FORM> </TR> <TR valign=middle><TD> <UL><FONT size=4> <LI onMouseOver="sch(s1)" onMouseOut="delet()"> <b><i>1 пара </i></b> Математический анализ <LI onMouseOver="sch(s2)" onMouseOut="delet()"> <b><i>2 пара </i></b>Высшая алгебра <LI onMouseOver="sch(s3)" onMouseOut="delet()"> <b><i>3 пара </i></b> Программирование <LI onMouseOver="sch(s4)" onMouseOut="delet()"> <b><i>4 пара </i></b> История <LI onMouseOver="sch(s5)" onMouseOut="delet()"> <b><i>5 пара </i></b> Дискретный анализ </FONT> </UL> </TD></TR> </TABLE> </BODY> </HTML>
Флажки
Элемент управления «флажок» используется в случае, когда из предложенных вариантов можно выбрать как один, так и несколько. Каждый вариант выбора задается флажком, который можно либо установить, либо сбросить. Флажок определяется в теге <input> значением checkbox атрибута type. Обязательным атрибутом является атрибут value, значение которого будет передано на обработку в случае выбора нажатием кнопки.