Российский государственный гуманитарный университет
Опубликован: 14.08.2003 | Доступ: свободный | Студентов: 22326 / 3958 | Оценка: 4.00 / 3.90 | Длительность: 10:03:00
Лекция 5:

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

< Лекция 4 || Лекция 5: 12345 || Лекция 6 >

Кнопка 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>
5.11. Вызов метода click() у кнопки сброса

Есть способы сбросить форму в исходное состояние в обход кнопки сброса (которой, кстати, у формы может и не быть). Во-первых, это вызов метода 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>
5.12. Сброс формы нажатием клавиши Esc

Как можно видеть, оба способа не просто сбрасывают форму, но и вызывают обработчик события 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>
5.13. Вызов метода click() у графической кнопки

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

< Лекция 4 || Лекция 5: 12345 || Лекция 6 >
Дамир Кантюков
Дамир Кантюков

Изучаю курс введение в JavaScript. 4 уроке есть код, где метод присвоен переменной, почему у меня не работает, браузер гугл:

<HTML><HEAD> <SCRIPT> wid = window.open('','','width=750,height=100,status=yes'); wid.document.open(); R = wid.document.write; R('<HTML><HEAD><SCRIPT>var t;<\/SCRIPT></HEAD>'); R('<BODY><H1>Новое окно</H1></BODY></HTML>'); wid.document.close(); </SCRIPT> </HEAD> <BODY> <A HREF="javascript: wid.t=window.prompt('Новое состояние:',''); wid.document.write(wid.t); wid.focus(); void(0);" >Изменим значение переменной t в новом окне</A> </BODY></HTML>

Нураалы Батырбеков
Нураалы Батырбеков
Олеся Павлова
Олеся Павлова
Россия, г. Нерюнгри