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

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

  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 самой формы.

В четвертой части книги нет описания элемента Button. Описание всех элементов-кнопок, включая описание элементов, создаваемых с помощью тега <button>, вы найдете в разделе, посвященном элементу Input.

15.9.5. Переключатели и флажки

Флажки и радиокнопки имеют два визуально различимых состояния: они могут быть либо установлены, либо сброшены. Пользователь может изменить состояние такого элемента, щелкнув на нем. Радиокнопки обычно объединяются в группы связанных элементов, имеющих одинаковые значения HTML-атрибута name. При установке одной из радиокнопок предыдущая установленная в группе радиокнопка сбрасывается. Флажки тоже часто объединяются в группы с общим значением атрибута name, и, когда вы обращаетесь к ним по имени, необходимо помнить, что вы получаете в ответ объект, подобный массиву, а не отдельный элемент.

И флажки, и переключатели имеют свойство checked. Это доступное для чтения и записи логическое значение определяет, отмечен ли элемент в данный момент. Свойство defaultChecked представляет собой доступное только для чтения логическое значение, содержащее значение HTML-атрибута checked: оно определяет, должен ли элемент отмечаться, когда страница загружается в первый раз.

Флажки и радиокнопки сами не отображают какой-либо текст и обычно выводятся вместе с прилегающим к ним HTML-текстом (или со связанным тегом <label>). Это значит, что установка свойства value элемента флажка или радиокнопки не изменяет внешнего вида элемента. Свойство value можно установить, но это изменит лишь строку, отсылаемую на веб-сервер при передаче данных формы.