Посмотри результат
Работа с формами
Сейчас мы поговорим о различных приемах работы сценариев JavaScript с HTML-формами.
Если в HTML-документе определена форма, то она доступна сценарию JavaScript как объект, входящий в объект document с именем, заданным атрибутом NAME тега FORM.
Свойства форм
Форма имеет два набора свойств, состав одного из которых фиксированный, а состав другого зависит от того, какие элементы определены в форме.
Свойства первого набора
action. Значение атрибута ACTION тега FORM.
encoding. Значение атрибута ENCTYPE тега FORM.
method. Значение атрибута METHOD тега FORM.
target. Значение атрибута TARGET тега FORM.
elements. Массив всех элементов формы.
length. Размер массива elements.
Большинство свойств первого набора просто отражает значение соответствующих атрибутов тега FORM. Что же касается массива elements, то в нем находятся объекты, соответствующие элементам, определенным в форме. Эти объекты образуют второй набор свойств формы. Адресоваться к этим объектам можно как к элементам массива elements, причем первому элементу формы будет соответствовать элемент с индексом 0, второму - с индексом 1 и т.д. Однако удобнее обращаться к элементам формы по их именам, заданным атрибутом NAME.
Элементы форм
Кнопки (BUTTON, RESET, SUBMIT)
Свойства
name. Имя объекта.
value. Надпись на кнопке.
Метод
click( ). Вызов этого метода тождественен щелчку мышкой по кнопке.
Пример
<html>
<head>
<meta http-equiv=Content-Type content="text/html;
charset=windows-1251">
<SCRIPT LANGUAGE="JavaScript">
<!--
function btnClick()
{
var Txt1 = "";
var Txt2 = "";
Txt1 = document.Test.bt.value;
Txt2 = document.Test.bt.name;
document.write("<HR>");
document.write("Вы нажали
кнопку: " + Txt1.bold() +
" с именем: "
+ Txt2.bold());
document.write("<HR>");
}
//-->
</SCRIPT>
</head>
<body lang=RU>
<H1>Нажатие кнопки</H1>
<FORM NAME="Test">
<INPUT
TYPE="button" NAME="bt" VALUE="Щелкни здесь!"
onClick="btnClick();">
</FORM>
</body>
</html>
Результат:
Нажатие кнопки
Начало формы
Конец формы
Флажок (CHECKBOX)
Свойства
name. Имя объекта.
value. Надпись на кнопке.
checked. Состояние флажка: true - флажок установлен, false - флажок не установлен.
defaultChecked. Отражает наличие атрибута CHECKED: true - есть, false - нет.
Метод
click( ). Вызов этого метода меняет состояние флажка.
Пример
<html>
<head>
<meta http-equiv=Content-Type content="text/html;
charset=windows-1251">
</head>
<body lang=RU>
<H1>Метод click флажка</H1>
<FORM NAME="Test">
Флажок <INPUT TYPE="checkbox" NAME="ch">
<BR>Состояние флажка можно изменить и этой кнопкой
<INPUT TYPE="button" VALUE="Смена состояния"
onClick="document.Test.ch.click();">
</FORM>
</body>
</html>
Результат:
Метод click флажка
Начало формы
Флажок
Состояние флажка можно изменить и этой кнопкой
Конец формы
Переключатель (RADIO)
Свойства
name. Имя объекта.
value. Надпись на кнопке.
length. Количество переключателей в группе.
checked. Состояние переключателя: true - переключатель включен, false - выключен.
defaultChecked. Отражает наличие атрибута CHECKED: true - есть, false - нет.
Метод
click( ). Вызов этого метода включает переключатель.
Так как группа переключателей имеет одно имя NAME, то к переключателям надо адресоваться как к элементам массива.
Пример
<html>
<head>
<meta http-equiv=Content-Type
content="text/html; charset=windows-1251">
<SCRIPT LANGUAGE="JavaScript">
<!--
function btnClick()
{
if(document.Test.Sex[0].checked)
{
document.Test.Sex[1].click();
}
else
{
document.Test.Sex[0].click();
}
}
//-->
</SCRIPT>
</head>
<body lang=RU>
<H1>Метод
click группы переключателей</H1>
<FORM NAME="Test">
<INPUT TYPE="RADIO"
NAME="Sex" VALUE ="Man" CHECKED>Мужской
<INPUT TYPE="RADIO"
NAME="Sex" VALUE ="Woman">Женский
<BR>Состояние
переключателей можно изменить и этой кнопкой
<INPUT TYPE="button" VALUE="Смена состояния" onClick="btnClick();">
</FORM>
</body>
</html>