Если рассматривать программирование на JavaScript в исторической перспективе, то первыми объектами, для которых были разработаны методы и свойства, стали поля форм. Обычно контейнер FORM и поля форм именованы:
поэтому к ним в программах на JavaScript обращаются по имени:
Если нажать на строку кода, которая расположена выше, то в поле формы, расположенном выше появится текст Текстовое поле.
Тот же эффект можно достичь используя массив форм загруженного документа:
В данном примере не только к форме, но и к полю формы мы обращаемся как к элементу массива.
Рассмотрим подробнее объект FORM, который соответствует контейнеру FORM.
Свойства | Методы | События |
---|---|---|
Сами по себе методы, свойства и события объекта FORM используются нечасто. Их переопределение обычно связано с реакцией на изменения значений полей формы.
action
Свойство action отвечает за вызов скрипта (CGI-скрипта). В нем указывается его (скрипта) URL. Но там где можно указать URL, можно указать и его схему "javascript":
Обратите внимание на тот факт, что в контейнере FORM указан атрибут method. В данном случае это сделано для того, чтобы к URL, заданному в action не дописывался символ "?". Дело в том, что методом доступа умолчания является метод GET. В этом методе при обращении к ресурсу из формы формируется элемент URL, носящий название search. Этот элемент предваряется символом "?", который дописывается к URL скрипта, а в нашем случае, к JavaScript-коду. Конструкция вида:
провоцирует появление ошибки JavaScript.
Метод post передает данные формы скрипту в теле http-сообщения, поэтому символ "?" не добавляется к URL и ошибка не генерируется. При этом применение void(0) отменяет перезагрузку документа и браузер не генерирует событие submit, т.е. не обращается к серверу при нажатии на кнопку, как это происходит при стандартной обработке форм.
method
Свойство method определяет метод доступа к ресурсам http-сервера из программы-браузера. В зависимости от того, как автор HTML-страницы собирается получать и обрабатывать данные из формы он может выбрать тот, или иной метод доступа. На практике наиболее часто используются методы GET и POST.
JavaScript-программа может изменить значение этого свойства. В предыдущем разделе(action) метод доступа в форме был указан явно. Теперь мы его переопределим в момент исполнения программы:
В данном примере стоит обратить внимание на два момента:
- Прежде чем нажимать на кнопку открытия окна предупреждения, следует выбрать кнопку "Метод POST". Если этого не сделать, то появится сообщение об ошибке JavaScript. Здесь все выглядит достаточно логично. Формирование URL происходит при генерации события submit, а вызов скрипта происходит после того, как событие сгенерировано. Поэтому вставить переопределение метода в обработчик события нельзя, т.к. к этому моменту будет уже сгенерирован URL, который , в свою очередь будет JavaScript-программой с символом "?" на конце. Переопределение метода должно произойти раньше, чем произойдет событие submit.
- В тело документа встроен через контейнер SCRIPT JavaScript-код, который сообщает метод доступа, установленный в форме по умолчанию. Этот контейнер расположен сразу после контейнера FORM. Ставить его перед контейнером FORM нельзя, т.к. в момент получения интерпретатором управления объект FORM не будет создан, и, следовательно, манипулировать с его свойствами не представляется возможным.
В остальном никаких других особенностей свойство method не имеет. В свойстве method можно указать и другие методы доступа, отличные от GET и POST, но это требует дополнительной настройки сервера.
target
Свойство target определяет имя окна, в которое следует загружать результат обращения к CGI-скрипту. Применение значения этого свойства внутри JavaScrip-программ не оправдано, т.к. всегда можно получить идентификатор окна или использовать встроенный массив frames[0] и свойства окна opener, top, parent и т.п.. Для загрузки внешнего файла в некоторое окно всегда можно применить метод window.open(). Но тем не менее, поэксплуатировать это свойство можно:
В примере организован цикл перебора имен фреймов. Если имя совпадает с выбранным именем, то фрейм считается выбранным.
elements[]
При создании встроенного в документ объекта FORM браузер создает и связанный с ним массив полей формы. Обычно к полям обращаются по имени, но можно также обращаться и по индексу массива полей формы:
Как видно из этого примера начинается индексирование полей в массиве с цифры "0". Общее число полей в форме доступно как результат обращения document.forms[i].elements.length.
encoding
Не смотря на то, что такое свойство у объекта FORM есть не очень понятно как его осмысленно использовать. Изменение свойства encoding оправдано только в том случае, когда в форме есть поле типа file. В этом случае предполагается, что пользователю разрешена передача файла со своего локального диска на сервер. При этом если не указана кодировка multipart/form-data, то передаваться будет только имя файла, а если она указана, то сам файл тоже.
Первое, что приходит в голову по этому поводу - отмена передачи файла при определенном стечении обстоятельств. При этом сам скрипт нужно размещать во внешнем файле, чтобы пользователь не изменил его код.
reset()
Метод reset(), не путать с обработчиком события onReset, позволяет установить значения полей формы по умолчанию. При этом не требуется использовать кнопку типа reset:
В данном примере по гипертекстовой ссылки происходит возврат в форме значений умолчания.
submit()
Метод submit() позволяет проинициировать передачу введенных в форму данных на сервер. При этом метод submit инициирует тот же процесс, что и нажатие на кнопку типа submit. Это позволяет отложить выполнение передачи данных на сервер:
Вообще говоря, можно написать скрипт, который будет передавать данные без ведома пользователя, используя метод submit(). Однако, браузер выдает предупреждение о таком поведении кода на странице.
onReset
Событие reset(восстановление значений умолчания в полях формы) возникает при нажатии на кнопку типа reset или при выполнении метода reset(). В контейнере FORM возможно переопределить функцию обработки данного события. Для этой цели в него введен атрибут onReset:
В этом примере следует обратить внимание на то, что обработчик события reset возвращает логическое значение false. Это сделано для того, чтобы перехватить обработку события reset полностью. Если обработчик события возвращает значение false, то установка полей по умолчанию не производится, если обработчик событий возвращает значение true, то установка значений полей по умолчанию производится.
onSubmit
Событие submit возникает при нажатии на кнопку типа submit, графическую кнопку(тип image), или при вызове метода submit(). Для переопределения метода обработки события submit в контейнер FORM добавлен атрибут onSubmit. Функция, определенная в этом атрибуте будет выполняться перед тем как отправить данные на сервер. При этом в зависимости от того, что эта функция вернет в качестве значения, данные либо будут отправлены, либо - нет.
В этом примере следует обратить внимание на конструкцию return test();. Сама функция test() возвращает значения true или false. Соответственно, данные либо отправляются на сервер, либо нет.