Формы - это, пожалуй, самые используемые элементы вэб-страницы, создаваемые с помощью HTML. С помощью JavaScript формы становятся интерактивными и функциональными. Первый шаг в создании интерактивной формы заключается в создании обычной формы HTML.

Определение формы

Форма HTML начинается с дескриптора <FORM>. Этот дескриптор указывает на начало формы и позволяет определять элементы формы. Элемент <FORM> имеет три атрибута:

NAME. Имя формы. Вы можете использовать форму, не присваивая ей имени. Для дополнительного усовершенствования формы с помощью JavaScript ей необходимо дать название.

• METHOD. Принимает значение GET или POST. Существует два способа отправки данных на сервер.
• ACTION. Это путь к сценарию CGI (или PHP или др.), в который отправляются данные из формы. Вы можете также использовать параметр mailto:. Он позволяет отправить результаты обработки введенных данных по указанному почтовому адресу.

  Например, в следующем примере отображен дескриптор <FORM> для формы Order. Эта форма использует метод GET и отправляет данные в сценарий CGI с названием order.cgi, расположенном в том же каталоге, что и сама вэб-страница:

  <FORM NAME="Order" METHOD="GET" ACTION="order.cgi">

  В форме, которая не обменивается данными с сервером, а служит только для локальных задач (например калькулятор или интерактивная игра), атрибуты METHOD и ACTION не используются. В них используется упрощенный дескриптор <FORM>:

  <FORM NAME="calcform">

  После дескриптора <FORM> указываются несколько элементов формы. Среди них: тектовые поля, флажки, кнопки и переключатели (радиокнопки). Далее мы с ними детально познакомимся. В конце формы используется дескриптор </FORM>.

  Использование объекта form

  Каждая форма на странице HTML представляется отдельным объектом form, имеющим то же название, что и атрибут NAME дескриптора <FORM>.

  Для управления формой также можно использовать массив forms. Этот массив содержит столько элементов, сколько их есть на форме. Все элементы проиндексированы, начиная со значения . Например, к первой форме документа, имеющие название form1, можно обратиться одним из двух способов:

  document.form1
  document.forms[0]

  Свойства объекта form

  Наряду с элементами, каждый объект form обладает целым набором свойств, которые в основном определяются в дескрипторе <FORM>. Всех их можно определить и с помощью операторов JavaScript. Ниже приведены все используемые свойства объекта form.

• action. Соответствует атрибуту формы ACTION или программе, в которую отправляются данные, введенные на форме.
• encoding. Определяет тип MIME. Определяется атрибутом ENCTYPE. В большинстве случаев не используется.
• length. Указывает количество элементов на форме. Значение этого свойства напрямую изменить нельзя.
• method. Определяет метод, используемый для отправки данных, - GET или POST.
• target. Определяет окно, в котором будут отображаться результаты обработки введенных на форме данных (в соответствии со сценарием CGI). В большинстве случае используется главное окно - результат обработки данных замещает саму форму.

  Отправка данных и очистка формы

  Объект form имеет два метода: submit и reset. Первый используется для отправки данных на обработку, а второй - для очистки формы.

  При использовании метода submit для отправки данных на сервер или с помощью электронной почты браузер выводит запрос на подтверждение отправки данных. Без подтверждения пользователя отправку данных провести нельзя.

  Определение событий формы

  Объект form имеет два обработчика событий: onSubmit и onReset. В эти обработчики событий, задаваемые в пределах дескриптора <FORM>, добавляется группа операторов JavaScript или функция, управляющая формой.

  Если вы добавите оператор (или функцию) в обработчик onSubmit, то он (или она) вызывается до отправки данных в сценарий CGI. Для того чтобы отменить отправку данных на обработку сценарием CGI, обработчик событий onSubmit должен возвратить значение false. Если же он возвращает значение true, то данные отправляются на сервер. В некоторых случаях необходимо добавить в форму кнопку Reset, запускающую обработчик событий onReset.

  Создание элементов форм

  Самое важное свойство объекта form - это массив elements. Он содержит объекты каждого элемента формы. Вызывается каждый элемент по имени или индексу в массиве. Например, следующих два выражения соответствуют первому элементу формы с именем name1:

  document.order.elements[0]
  document.order.name1

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

  Например document.forms.length определяет количество форм в документе, а document.form1.elements.length - количество элементов в форме form1.

   

  Текстовое поле

  Чаще всего в формах ввода данных используются текстовые поля. С их помощью запрашиваются имена, адреса и другая текстовая информация. Используя JavaScript, вы можете ввести значение в текстовое поле автоматически. Ниже приведен пример простого текстового поля:

  <INPUT TYPE="text" NAME="text1" VALUE="Привет" SIZE="30">

  В этом примере определено текстовое поле text1. Оно содержит текст "Привет" и имеет длину 30 символов. В JavaScript это поле рассматривается как объект text с именем text1.

  Текстовые поля - это самые простые элементы формы. Каждое текстовое поле имеет следующие свойства:

  name. Имя, определяющее это поле. Оно используется и как имя объекта.

  • defaultValue. Значение по умолчанию, определяемое в параметре VALUE. Это свойство имеет атрибут только для чтения.
  • value. Текущее значение, введенное в поле. Это измененное пользователем или функцией значение по умолчанию.

    При работе с текстовыми полями больше всего времени уходит на считывание значения, введенного пользователем, или на изменение значения по умолчанию программным способом. В следующем примере значение, введенное в текстовое поле username формы order изменяется на Василий Сергеевич Пупкин:

    document.order.username.value="Василий Сергеевич Пупкин"

    Текстовые панели

    Содержимое текстовой панели

    Текстовые панели определяются с помощью дескриптора <TEXTAREA> и представляются объектом textarea. Существует большая разница между текстовым полем и текстовой панелью. Текстовые панели позволяют вводить несколько строк данных. Ниже приведен пример задания текстовой панели в документе HTML:

    <TEXTAREA NAME="text1" ROWS="2" COLS="70">
    Содержимое текстовой панели
    </TEXTAREA>

    Таким образом определяется текстовая панель с названием text1. Она состоит из двух строк, каждая из которых имеет длину 70 символов. В JavaScript использовать эту текстовую панель вы сможете с помощью объекта text1, дочернего по отношению к объекту form.

    Текст между открывающим и закрывающим дескриптором <TEXTAREA> используется в качестве значения по умолчанию. Вводя текст по умолчанию, вы можете использовать символы конца строки.

    Управление текстом в формах

    Объекты text и textarea имеют слеюдующие дополнительные методы:

  • focus(). Определяет расположение курсора в поле и выделяет текущее поле.
  • blur(). Удаляет курсор из поля.
  • select(). Выделяет поле подобно тому, как это делает пользователь мышью. Выделяет текст в поле. Не позволяет выделить часть текста.

    Изменение значения поля также определяется с помощью обработчика события. Объекты text и textarea поддерживают такие обработчики событий:

  • onFocus. Это событие происходит при определении расположения курсора в поле.
  • onBlur. Происходит при удалении курсора из текстового поля.
  • onChange. Происходит при изменении пользователем значения в поле.
  • onSelect. Происходит при выделении пользователем части или всего текста в текстовом поле. Правда, нет возможности определить, какая часть текста выделена, а какая - нет. (При выделении текста с помощью метода select(), описанного выше, этот обработчик событий не запускается.

    При использовании эти обработчики событий объявляются в дескрипторе <INPUT>. Следующий пример иллюстрирует применение в программе обработчика onChange для отображения сообщения:

    <INPUT TYPE="text" NAME="text1" onChange="window.alert('Изменено');">

    Кнопка

    После заполнения текстовых полей обычно всегда используют кнопки. Кнопки определяются также в дескрипторе <INPUT> и могут быть нескольких типов.

    type=SUBMIT. Это кнопка Submit. Она позволяет отправлять данные, введенные в форме на сервер для обработки сценарием CGI.

    type=RESET. Кнопка Reset. Она возвращает форму в исходное состояние после ввода всех параметров по умолчанию.

    type=BUTTON. Произвольная кнопка. Она не вызывает никакого действия, но определяется одному из обработчиков событий JavaScript.

    Все три типа кнопок имеют атрибут NAME для определения имени кнопки и атрибут VALUE для указания текста, отображаемого на кнопке. Некоторые кнопки уже рассматривались нами в предыдущих примерах. В приведенном ниже примере определяется кнопка Submit, имеющая название sub1 и значение "Щелкните здесь":

    <INPUT TYPE="SUBMIT" NAME="sub1" VALUE="Щелкните здесь">

    После щелчка на кнопке Reset или Submit вызывается обработчик onReset или onSubmit. Для создаваемых произвольных кнопок запускается обработчик onClick.

    Флажок

    Флажок - это элемент формы, выглядящий как маленький пустой квадрат. Щелкнув на флажке, вы определяете одно из его состояний - выставлен или снят. Эти состояния соответствуют возвращаемым значения true или false. Для определения флажка используется все тот же дескриптор <INPUT>. Ниже приведен пример его определения:

    <INPUT TYPE="CHECKBOX" NAME="check1" VALUE="Yes" CHECKED>

    И опять элементу формы определяется собственное имя. Атрибут VALUE определяет текст опции флажка. Это утверждение считается справедливым при выставленном флажке. По умолчанию вводится значение on. Атрибут CHECKED указывает на выставленное по умолчанию состояние флажка

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

  • name. Определяет имя объекта checkbox и флажка.
  • value. Это действительное значение флажка - по умолчанию on. Это значение используется сервером для определения состояния флажка. В JavaScript для определения состояния используется свойство checked.
  • defaultChecked. Это состояние по умолчанию флажка, определенное в атрибуте CHECKED.
  • checked. Определяет текущее значение флажка. Это булево значение - true или false.

    Для управления флажком или определения его значения используется последнее свойство. Следующий оператор выставляет флажок опции same в объекте формы order:

    document.order.same.checked=true;

    Объект флажка имеет всего один метод click(). Этот метод симулирует щелчок мышью на флажке. Для него также определен один обработчик события onClick, запускающийся при выставлении флажка. Поскольку он запускается не при любом щелчке на флажке, для его успешного использования необходимо точно знать значение свойства checked.