Объект form

Каждая форма в документе, определенная тегом < FORM>, создает объект form, порождаемый объектом document. Ссылка на этот объект осуществляется с помощью переменной, определенной в атрибуте NAME тега < FORM>. В документе может быть несколько форм, поэтому для удобства ссылок и обработки в объект document введено свойство-массив forms, в котором содержатся ссылки на все формы документа. Ссылка на первую форму задается как document.forms[0], на вторую — document.forms[1] и т.д. Вместо индекса в массиве forms можно указывать строку, значение которой равно имени переменной для формы. Например, если в документе присутствует единственная форма со значением атрибута name=form1, то любой из следующих операторов JavaScript содержит ссылку на эту форму:

document.forms[0]

document.forms[" form1" ]

document.form1

Последний оператор возможен в силу того, что объект document порождает объект form (как и все остальные объекты, соответствующие элементам HTML страницы) и ссылку на него можно осуществлять по обычным правилам наследования языка JavaScript.

Все элементы формы порождают соответствующие объекты, подчиненные объекту родительской формы. Таким образом, для ссылки на объект text формы form1 можно пользоваться любым из нижеприведенных операторов:

document.forms[0].text1

document.forms[" form1" ].text1

document.form1.text1

Каждый объект form имеет также семейство elements, содержащее ссылки на все подчиненные форме элементы в том порядке, как они определены в документе HTML.

Элементы формы, точнее, их объекты, имеют свойство name, значение которого равно значению атрибута NAME тега < INPUT>, а также свойство value, значение которого определяется смыслом атрибута VALUE элемента формы. Например, для элементов text и textarea значением этого свойства будет строка содержимого полей ввода этих элементов; для кнопки подтверждения – надпись на кнопке и т.д.

У объекта, соответствующего элементу управления SELECT, имеется семейство options, в котором хранятся ссылки на объекты, соответствующие элементам OPTION этого элемента управления.

Для формы одним из важных действий на странице является проверка правильности заполнения полей пользователем на машине клиента до пересылки их на сервер. В следующем примере разъясняется, как выполнять эту процедуру.

4Пример 18. Проверка данных формы

Страница HTML с формой form1, содержащей текстовые однострочные поля name для ввода имени и age для ввода года рождения, и функцией validate(), вызываемой до отправки данных формы на сервер, представлена следующим кодом:

< HEAD>

< SCRIPT LANGUAGE=" JavaScript" >

<! -- //Скрыть сценарий от браузеров, не поддерживающих JavaScript

// функция проверки поля с целым значением

function validate() {

var ret = true;

if(isNaN(parseInt(form1.age.value))) {

ret = false;

alert(" Год должен быть целым числом! ");

form1.age.value = " ";

form1.age.focus();

}

return ret;

}

//-->

< /SCRIPT>

< /HEAD>

< BODY onload=" form1.name.focus()" >

< FORM name=" form1" action=" "

onsubmit=" return validate()" >

< pre>

Ваше имя: < INPUT type=" text" size=10 name=" name" > < br>

Ваш год рождения: < INPUT type=" text" size=5 name=" age" >

< /pre>

< HR>

< INPUT type=" submit" value=" Подтвердить" >

< /FORM>

< /BODY>

После загрузки страницы в браузер курсор устанавливается в поле ввода имени. Нажатие на кнопку Подтвердить до отсылки данных формы генерирует событие submit для формы, которое и перехватывается в ее обработчике события onsubmit. Функция проверки должна вернуть true, если все введенные данные правильны (а мы проверяем одно поле age), или false, если какие-то проверяемые данные не правильны. Но этого еще недостаточно, чтобы в случае неправильности данных браузером не инициировалась процедура их пересылки. В обработчике события onsubmit обязательно должна присутствовать операция return. Если ее операнд true, то данные пересылаются, если false, то нет.