До появления JavaScript отправка форм выполнялась с помощью специальной кнопки
<b>Submit</b>
, а сброс значений элементов формы в значения по умолчанию - с помощью специальной кнопки
<b>Reset</b>
. В языке JavaScript тем же целям служат два метода,
<b>submit()</b>
и
<b>reset()</b>
, объекта
<b>Form</b>
. Метод
<b>submit()</b>
объекта
<b>Form</b>
отправляет форму, а метод
<b>reset()</b>
сбрасывает элементы формы в исходное состояние.
У всех (или у большинства) элементов форм есть общие свойства, перечисленные далее. Кроме того, у некоторых элементов есть специальные свойства, которые будут описаны ниже, когда мы будем рассматривать элементы форм различных типов по отдельности.
<b>type</b>
Доступная только для чтения строка, идентифицирующая тип элемента формы. Для элементов форм, определяемых с помощью тега
<b><input></b>
, это свойство просто хранит значение атрибута
<b>type</b>
. Другие элементы форм (такие как
<b><textагеа></b>
и
<b><select></b>
) также определяют свойство
<b>type</b>
, благодаря чему его можно использовать в сценарии для идентификации элементов, подобно тому, как идентифицируются различные типы элементов
<b><input></b>
. Значения этого свойства для каждого типа элементов форм перечислены во втором столбце табл. 15.1.
<b>form</b>
Доступная только для чтения ссылка на объект
<b>Form</b>
, в котором содержится этот элемент, или null, если элемент не находится внутри элемента
<b><form></b>
.
<b>name</b>
Доступная только для чтения строка, указанная в HTML-атрибуте name,
<b>value</b>
Доступная для чтения и записи строка, определяющая «значение», содержащееся в элементе формы или представляемое им. Эта строка отсылается на веб-сервер при передаче формы и только иногда представляет интерес для JavaScript-программ. Для элементов
<b>Text</b>
и
<b>Textarea</b>
это свойство содержит введенный пользователем текст. Для кнопок, создаваемых с помощью тега
<b><input></b>
(но не для кнопок, создаваемых с помощью тега
<b><button></b>
), это свойство определяет отображаемый на кнопке текст. Свойство
<b>value</b>
для элементов переключателей (радиокнопок) и флажков не редактируется и никак не представляется пользователю. Это просто строка, устанавливаемая HTML-атрибутом
<b>value</b>
. Эта строка предназначена для отправки веб-серверу, и ее можно использовать для передачи дополнительных данных. Свойство
<b>value</b>
будет обсуждаться далее в этой главе, когда мы будем рассматривать различные категории элементов формы.
15.9.3. Обработчики событий форм и их элементов
Каждый элемент
<b>Form</b>
имеет обработчик события
<b>onsubmit</b>
, возникающего в момент отправки формы, и обработчик события
<b>onreset</b>
, возникающего в момент сброса формы в исходное состояние. Обработчик
<b>onsubmit</b>
вызывается непосредственно перед отправкой формы. Он может отменить отправку, вернув значение
<b>false</b>
. Это дает JavaScript-программам возможность проверить ввод пользователя и избежать отправки неполных или ошибочных данных серверной программе. Обратите внимание, что обработчик
<b>onsubmit</b>
вызывается только в случае щелчка мышью на кнопке
<b>Submit</b>
. Вызов метода
<b>submit()</b>
формы не приводит к вызову обработчика
<b>onsubmit</b>
.
Обработчик событий
<b>onreset</b>
похож на обработчик
<b>onsubmit</b>
. Он вызывается непосредственно перед сбросом формы в исходное состояние и может предотвратить сброс элементов формы, вернув значение
<b>false</b>
. Кнопки
<b>Reset</b>
редко используются в формах, но если у вас имеется такая кнопка, возможно, у вас появится желание запросить у пользователя подтверждение, прежде чем выполнить сброс:
<b><form...</b>
<b> onreset="return confirm('Bы действительно хотите сбросить все и начать сначала?')"></b>
<b> <button type="reset">Очистить поля ввода и начать сначала</button></b>
<b></form></b>
Подобно обработчику
<b>onsubmit</b>
, обработчик
<b>onreset</b>
вызывается только в случае щелчка мышью на кнопке
<b>Reset</b>
. Вызов метода
<b>reset()</b>
формы не приводит к вызову обработчика
<b>onreset</b>
.
Элементы форм обычно возбуждают событие
<b>click</b>
или
<b>change</b>
, когда пользователь взаимодействует с ними, и вы можете реализовать обработку этих событий, определив обработчик
<b>onclick</b>
или
<b>onchange</b>
. В третьем столбце таблицы 15.1 для каждого элемента формы указан основной обработчик событий. Вообще говоря, элементы форм, являющиеся кнопками, возбуждают событие
<b>click</b>
в момент активации (даже когда активация производится посредством нажатия клавиши на клавиатуре, а не щелчком мышью). Другие элементы форм возбуждают событие
<b>change</b>
, когда пользователь изменяет содержимое, представляемое элементом. Это происходит, когда пользователь вводит текст в текстовое поле или выбирает элемент раскрывающегося списка. Обратите внимание, что это событие возбуждается не каждый раз, когда пользователь нажимает клавишу, находясь в текстовом поле ввода. Оно возбуждается, только когда пользователь изменит значение элемента и перенесет фокус ввода в другой элемент. То есть этот обработчик событий вызывается по завершении ввода. Радиокнопки и флажки являются кнопками, хранящими информацию о своем состоянии, и все они возбуждают события
<b>click</b>
и
<b>change</b>
; из них событие
<b>change</b>
имеет большее практическое значение.
