Программируем формы

Кнопка reset

Кнопка сброса ( reset ) позволяет вернуть все поля формы в первоначальное состояние, которое они имели при загрузке страницы. Нажатие кнопки сброса приводит к следующей последовательности действий браузера:

1. вызов обработчика события onClick у данной кнопки;
2. вызов обработчика события onReset у формы;
3. восстановление значений по умолчанию во всех полях формы.

Вызов метода click() у кнопки сброса равносилен нажатию этой кнопки, т.е. приводит к тем же трем действиям:

<FORM NAME=f
   onReset="return confirm('Вы хотите очистить форму?')">
<INPUT TYPE=text VALUE="Измените этот текст">
<INPUT TYPE=reset VALUE="Кнопка сброса" NAME=s
  onClick="alert('Вызван обработчик onClick у кнопки сброса')">
</FORM>
<A HREF="javascript: document.f.s.click();void(0);"
 >Вызвать метод <B>click()</B> кнопки сброса</A>

Есть способы сбросить форму в исходное состояние в обход кнопки сброса (которой, кстати, у формы может и не быть). Во-первых, это вызов метода reset() у формы. Во-вторых, если фокус находится на любом поле или кнопке формы, то можно нажать клавишу Esc. Пример:

Измените текст, а затем нажмите Esc (либо ссылку).<BR>
<FORM NAME=f
   onReset="return confirm('Вы хотите очистить форму?')">
<INPUT TYPE=text VALUE="Измените этот текст">
</FORM>
<A HREF="javascript: document.f.reset();void(0);"
 >Вызвать метод <B>reset()</B> формы</A>

Как можно видеть, оба способа не просто сбрасывают форму, но и вызывают обработчик события onReset формы. Таким образом, метод reset() ведет себя более логично и предсказуемо, нежели submit().

Графическая кнопка

Графическая кнопка - это разновидность кнопки отправки. Ее отличие в том, что вместо кнопки с надписью пользователь увидит картинку, по которой можно кликнуть:

<FORM ACTION="receive.htm">
<INPUT TYPE=image SRC="pic.gif">
</FORM>

Кроме того, когда пользователь кликает по графической кнопке, то на сервер отправятся не только данные, введенные в поля формы, но также и координаты указателя мыши относительно левого верхнего угла изображения. К сожалению, перехватить эти координаты в JavaScript-программе не удается. Если Вам необходимо работать с этими координатами, то вместо графической кнопки рекомендуется создать активную карту с помощью контейнера <MAP>.

Графические кнопки имеют ряд странностей. Например, являясь одновременно и кнопкой, и изображением, они почему-то отсутствуют как в коллекции document.f.elements[], так и в коллекции document.images[] (IE 7, Mozilla Firefox). Как следствие, они не учитываются ни в общем количестве элементов формы ( document.f.length ), ни в общем количестве изображений документа ( document.images.length ).

Как же обратиться к такой кнопке? Это можно сделать, например, задав атрибут ID:

<INPUT TYPE=image SRC="pic.gif" ID="d1">

и затем в программе написав: var knopka = document.getElementById('d1'). После этого мы можем обращаться к свойствам этой кнопки, например knopka.src, а также к методу knopka.click(). Следующий пример показывает, что вызов метода click() графической кнопки "почти" равносилен нажатию этой кнопки, т.е. последовательно вызывает обработчики onClick кнопки, onSubmit формы и передает данные на сервер (но что при этом передается в качестве координат курсора мыши?):

<FORM ACTION="receive.htm"
      onSubmit="return confirm('Вы хотите отправить данные?')">
<INPUT onClick="alert('Вызван обработчик onClick у графической кнопки')"
      TYPE="image" SRC="pic.gif" id="d1">
</FORM>

<A HREF="javascript:
   var knopka = document.getElementById('d1');
       knopka.click();  void(0);"
 >Вызвать метод <B>click()</B> графической кнопки</A>

Поскольку графические кнопки используются довольно редко, на этом мы остановимся в их обсуждении.