6. Лекция: Программируем формы Контейнер form

Если рассматривать программирование на JavaScript в исторической перспективе, то первыми объектами, для которых были разработаны методы и свойства, стали поля форм. Обычно контейнерFORM и поля форм именованы:

<FORM NAME=fname METHOD=get>

<INPUT NAME=iname SIZE=30 MAXLENGTH=30>

</FORM>

Поэтому в программах на JavaScript к ним обращаются по имени:

document.fname.iname.value="Текст";

Того же эффекта можно достичь, используя коллекцииформ и элементов, обращаясь к форме и к элементу либо по индексу, либо по имени:

document.forms[0].elements[0].value="Текст";

document.forms['fname'].elements['iname'].value="Текст";

Рассмотрим подробнее объект Form, который соответствует контейнеру FORM. Его свойства, методы и события используются для задания реакции на действия пользователя, например, изменения значений полей или нажатие кнопок.

Свойства, методы и события объекта  Form
Свойства	Методы	События
length action method target encoding elements[]	reset() submit()	Reset Submit

Свойства объекта Form Свойство action

Свойство action отвечает за вызов CGI-скрипта. В нем указывается URL этого скрипта. Но там, где можно указать URL, можно указать и его схему javascript:, например:

<FORM METHOD=post ACTION="javascript: alert('Работает!');">

<INPUT TYPE=submit VALUE="Продемонстрировать JavaScript в ACTION">

</FORM>

Обратите внимание на тот факт, что в контейнере FORM указан атрибут METHOD. В данном случае это сделано для того, чтобы к URL, заданному в атрибуте ACTION, не дописывался символ " ?". Дело в том, что методом доступа по умолчанию является метод GET. В этом методе при обращении к ресурсу из формы создается элемент URL под названием search. Этот элемент предваряется символом " ?", который дописывается в конец URL скрипта. В нашем случае это привело бы к неправильной работе JavaScript-кода, поскольку конструкция вида

alert('Строка');?

провоцирует ошибку JavaScript. Метод POST передает данные формы скрипту в теле HTTP-сообщения, поэтому символ " ?" не добавляется к URL, и ошибка не генерируется. При этом применение void(0) отменяет перезагрузку документа, и браузер не генерирует событие Submit, т.е. не обращается к серверу при нажатии на кнопку, как это было бы при стандартной обработке формы.

Свойство method

Свойство method определяет метод доступа к ресурсам HTTP-сервера из программы-браузера. В зависимости от того, как автор HTML-страницы собирается получать и обрабатывать данные из формы, он может выбрать тот или иной метод доступа. На практике чаще всего используются методы GET и POST.

JavaScript-программа может изменить значение этого свойства. В предыдущем разделе метод доступа в форме был указан явно. Теперь мы его переопределим в момент исполнения программы:

<FORM NAME=f ACTION="javascript: alert('Работает!');">

<SCRIPT>

document.write('По умолчанию установлен метод: '+document.f.method+'.<BR>');

</SCRIPT>

<INPUT TYPE=button onClick="document.f.method='post'" VALUE="Сменить метод на POST">

<INPUT TYPE=button onClick="document.f.method='get'" VALUE="Сменить метод на GET"><BR>

<INPUT TYPE=submit VALUE="JavaScript в ACTION">

</FORM>

Пример 5.1. Изменение метода формы (GET и POST) скриптом (html, txt)

По умолчанию установлен метод GET.

В данном примере стоит обратить внимание на два момента:

1. Прежде чем открывать окно предупреждения, следует нажать кнопку "Метод POST". Если этого не сделать, то появится сообщение об ошибке JavaScript. Здесь все выглядит достаточно логично. Формирование URL происходит при генерации события submit, а вызов скрипта - после того, как событие сгенерировано. Поэтому вставить переопределение метода в обработчик события нельзя, так как к этому моменту будет уже сгенерирован URL, который, в свою очередь, будет JavaScript-программой с символом " ?" на конце. Переопределение метода должно быть выполнено раньше, чем произойдет событие Submit.

2. В тело документа через контейнер SCRIPT встроен JavaScript-код, который сообщает метод доступа, установленный в форме по умолчанию. Этот контейнер расположен сразу за контейнером FORM. Ставить его перед контейнером FORM нельзя, так как в момент получения интерпретатором управления объект FORM не будет создан, и, следовательно, работать с его свойствами не представляется возможным.

Никаких других особенностей свойство method не имеет. В данном свойстве можно указать и другие методы доступа, отличные от GET и POST, но это требует дополнительной настройки сервера.