JavaScript. Подробное руководство, 6-е издание

Флэнаган Дэвид

До появления JavaScript отправка форм выполнялась с помощью специальной кнопки

Submit

, а сброс значений элементов формы в значения по умолчанию - с помощью специальной кнопки

Reset

. В языке JavaScript тем же целям служат два метода,

submit

и

reset

, объекта

Form

. Метод

submit

объекта

Form

отправляет форму, а метод

reset

сбрасывает элементы формы в исходное состояние.

У всех (или у большинства) элементов форм есть общие свойства, перечисленные далее. Кроме того, у некоторых элементов есть специальные свойства, которые будут описаны ниже, когда мы будем рассматривать элементы форм различных типов

по отдельности.

type

Доступная только для чтения строка, идентифицирующая тип элемента формы. Для элементов форм, определяемых с помощью тега

<input>

, это свойство просто хранит значение атрибута

type

. Другие элементы форм (такие как

<textагеа>

и

<select>

) также определяют свойство

type

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

<input>

. Значения этого свойства для каждого типа элементов форм перечислены во втором столбце табл. 15.1.

form

Доступная только для чтения ссылка на объект

Form

, в котором содержится этот элемент, или null, если элемент не находится внутри элемента

<form>

.

name

Доступная только для чтения строка, указанная в HTML-атрибуте name,

value

Доступная для чтения и записи строка, определяющая «значение», содержащееся в элементе формы или представляемое им. Эта строка отсылается на веб-сервер при передаче формы и только иногда представляет интерес для JavaScript-программ. Для элементов

Text

и

Textarea

это свойство содержит введенный пользователем текст. Для кнопок, создаваемых с помощью тега

<input>

(но не для кнопок, создаваемых с помощью тега

<button>

), это свойство определяет отображаемый на кнопке текст. Свойство

value

для элементов переключателей (радиокнопок) и флажков не редактируется и никак не представляется пользователю. Это просто строка, устанавливаемая HTML-атрибутом

value

. Эта строка предназначена для отправки веб-серверу, и ее можно использовать для передачи дополнительных данных. Свойство

value

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

15.9.3. Обработчики событий форм и их элементов

Каждый элемент

Form

имеет обработчик события

onsubmit

, возникающего в момент отправки формы, и обработчик события

onreset

, возникающего в момент сброса формы в исходное состояние. Обработчик

onsubmit

вызывается непосредственно перед отправкой формы. Он может отменить отправку, вернув значение

false

. Это дает JavaScript-программам возможность проверить ввод пользователя и избежать отправки неполных или ошибочных данных серверной программе. Обратите внимание, что обработчик

onsubmit

вызывается только в случае щелчка мышью на кнопке

Submit

. Вызов метода

submit

формы не приводит к вызову обработчика

onsubmit

.

Обработчик событий

onreset

похож на обработчик

onsubmit

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

false

. Кнопки

Reset

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

<form...

onreset="return confirm('Bы действительно хотите сбросить все и начать сначала?')">

<button type="reset">Очистить

поля ввода и начать сначала</button>

</form>

Подобно обработчику

onsubmit

, обработчик

onreset

вызывается только в случае щелчка мышью на кнопке

Reset

. Вызов метода

reset

формы не приводит к вызову обработчика

onreset

.

Элементы форм обычно возбуждают событие

click

или

change

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

onclick

или

onchange

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

click

в момент активации (даже когда активация производится посредством нажатия клавиши на клавиатуре, а не щелчком мышью). Другие элементы форм возбуждают событие

change

, когда пользователь изменяет содержимое, представляемое элементом. Это происходит, когда пользователь вводит текст в текстовое поле или выбирает элемент раскрывающегося списка. Обратите внимание, что это событие возбуждается не каждый раз, когда пользователь нажимает клавишу, находясь в текстовом поле ввода. Оно возбуждается, только когда пользователь изменит значение элемента и перенесет фокус ввода в другой элемент. То есть этот обработчик событий вызывается по завершении ввода. Радиокнопки и флажки являются кнопками, хранящими информацию о своем состоянии, и все они возбуждают события

click

и

change

; из них событие

change

имеет большее практическое значение.

Элементы форм также возбуждают событие

focus

, когда они получают фокус ввода, и событие

blur

, когда теряют его.

Важно знать, что внутри обработчика события ключевое слово

this

всегда ссылается на элемент документа, вызвавший данное событие (подробнее об этом будет рассказываться в главе 17). Во всех элементах форм имеется свойство

form

, ссылающееся на форму, в которой содержится элемент, поэтому обработчики событий элемента формы всегда могут обратиться к объекту

Form

, как к

this.form

. Сделав еще один шаг, мы можем сказать, что обработчик событий для одной формы может ссылаться на соседний элемент формы, имеющий имя х, как

this.form.х

.

15.9.4. Кнопки

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

onclick

. Кнопки, определяемые с помощью элементов

<input>

, отображают простой текст, содержащийся в их свойстве

value

.

Кнопки, определяемые с помощью элементов

<button>,

отображают содержимое элемента.

Обратите внимание, что гиперссылки предоставляют такой же обработчик событий

onclick

, как и кнопки. Когда действие, выполняемое обработчиком

onclick

, можно классифицировать как «переход по ссылке», используйте ссылку. В противном случае используйте кнопку.

Элементы

Submit

и

Reset

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

onclick

возвращает

false

, стандартное действие этих кнопок, предусмотренное по умолчанию, не выполняется. Обработчик

onclick

элемента

Submit

можно использовать для проверки введенных значений, но обычно это делается в обработчике

onsubmit

самой формы.