Контейнер form
Если рассматривать программирование на JavaScript в исторической перспективе, то первыми объектами, для которых были разработаны методы и свойства, стали поля форм. Обычно контейнер FORM и поля форм именованы:
<FORM NAME=f_name METHOD=get
ACTION="javascript:void(0);">
<INPUT NAME=i_name SIZE=30 MAXLENGTH=30>
</FORM>
Поэтому в программах на JavaScript к ним обращаются по имени:
window.document.f_name.i_name.value="Текстовое поле";
Того же эффекта можно достичь, используя массив форм загруженного документа:
window.document.forms[0].elements[0].value="Текстовое поле";
В данном примере не только к форме, но и к полю формы мы обращаемся как к элементу массива.
Рассмотрим подробнее объект Form, который соответствует контейнеру FORM.
Свойства |
Методы |
События |
|
|
|
action
Свойство action отвечает за вызов скрипта (CGI-скрипта). В нем указывается его (скрипта) URL. Но там, где можно указать URL, можно указать и его схему javascript:
<FORM METHOD=post
ACTION="javascript:window.alert('We use JavaScript-code as an URL');
void(0);">
<INPUT TYPE=submit VALUE="Продемонстрировать JavaScript в action">
</FORM>
Обратите внимание на тот факт, что в контейнере FORM указан атрибут METHOD. В данном случае это сделано для того, чтобы к URL, заданному в action, не дописывался символ "?". Дело в том, что методом доступа по умолчанию является метод GET. В этом методе при обращении к ресурсу из формы создается элемент URL под названием search. Этот элемент предваряется символом "?", который дописывается к URL скрипта, а в нашем случае, к JavaScript-коду.
target
Свойство target определяет имя окна, в которое следует загружать результат обращения к CGI-скрипту. Применение значения этого свойства внутри JavaScript-программ не оправдано, так как всегда можно получить идентификатор окна или задействовать встроенный массив frames[0] и свойства окна opener, top, parent и т.п. Для загрузки внешнего файла в некоторое окно всегда можно применить метод window.open(). Но тем не менее использовать это свойство можно:
В примере организован цикл перебора имен фреймов. Если имя совпадает с указанным именем, то фрейм считается выбранным. Здесь нужно сделать следующее замечание: при работе с Internet Explorer обращения к фреймам по индексу следует избегать.
elements[]
При генерации встроенного в документ объекта Form браузер создает и связанный с ним массив полей формы. Обычно к полям обращаются по имени, но можно обращаться и по индексу массива полей формы:
<FORM NAME=fe>
<INPUT NAME=fe1 SIZE=30 MAXLENGTH=30>
<INPUT TYPE=button VALUE="Ввести текст по имени"
onClick="document.fe.fe1.value='Ввести текст по имени';">
<INPUT TYPE=button VALUE="Ввести текст по индексу"
onClick="document.fe.elements[0].value='Ввести текст по индексу';">
<INPUT TYPE=reset VALUE="Очистить">
</FORM>
Как видно из этого примера, индексирование полей в массиве начинается с цифры "0". Общее число полей в форме доступно как результат обращения
document.forms[i].elements.length.
encoding
Такое свойство у объекта Form есть, но не совсем понятно, как его использовать. Изменение свойства encoding оправдано только в том случае, когда в форме имеется поле типа file. В этом случае предполагается, что пользователю разрешена передача файла со своего локального диска на сервер. При этом если не указана кодировка multipart/form-data, то передаваться будет только имя файла, а если она указана, то и сам файл тоже.
Первое, что приходит в голову по этому поводу, — отмена передачи файла при определенном стечении обстоятельств. Сам скрипт нужно размещать во внешнем файле, чтобы пользователь не изменил его код.
reset()
Метод reset(), не путать с обработчиком события onReset, позволяет установить значения полей формы по умолчанию. При этом использовать кнопку типа Reset не требуется:
<FORM NAME=r>
<INPUT VALUE="Значение по умолчанию" SIZE=30 MAXLENGTH=30>
<INPUT TYPE=button VALUE="Изменим текст в поле ввода"
onClick="document.r.elements[0].value='Изменили текст';">
</FORM>
<A HREF="javascript:document.r.reset();void(0);">
Установили значение по умолчанию</A>
В данном примере по гипертекстовой ссылке происходит возврат в форме значения по умолчанию.
submit()
Метод submit() позволяет проинициировать передачу введенных в форму данных на сервер. При этом методом submit() инициируется тот же процесс, что и нажатием на кнопку типа Submit. Это позволяет отложить выполнение передачи данных на сервер:
<FORM NAME=s METHOD=post
ACTION="javascript:window.alert('Данные подтверждены');void(0);">
Введите цифру или букву:<INPUT SIZE=1 MAXLENGTH=1>
</FORM>
<A HREF="javascript:document.s.submit();">Отправить данные</A>
Вообще говоря, можно написать скрипт, который будет передавать данные без ведома пользователя, с помощью метода submit(). Однако браузер выдает предупреждение о таком поведении кода на странице.
onReset
Событие reset (восстановление значений по умолчанию в полях формы) возникает при нажатии на кнопку типа Reset или при выполнении метода reset(). В контейнере FORM можно переопределить функцию обработки данного события. Для этой цели в него введен атрибут onReset:
<FORM onReset="javascript:window.alert(
'Event Reset');return false;">
<INPUT VALUE="Значение по умолчанию">
<INPUT TYPE=reset VALUE="Восстановить">
</FORM>
В этом примере следует обратить внимание на то, что обработчик события reset возвращает логическое значение false. Это сделано для того, чтобы перехватить обработку события reset полностью. Если обработчик события возвращает значение false, то установка полей по умолчанию не производится; если обработчик событий возвращает значение true, то установка значений полей по умолчанию производится.
onSubmit
Событие submit возникает при нажатии на кнопку типа Submit, графическую кнопку (тип image) или при вызове метода submit(). Для переопределения метода обработки события submit в контейнер FORM добавлен атрибут onSubmit. Функция, определенная в этом атрибуте, будет выполняться перед тем, как отправить данные на сервер. При этом в зависимости от того, что функция вернет в качестве значения, данные либо будут отправлены, либо нет.
В этом примере следует обратить внимание на конструкцию return test();. Сама функция test() возвращает значения true или false. Соответственно, данные либо отправляются на сервер, либо нет.