Передача данных формы

Основное значение форм состоит в сборе информации от пользователей и передачи их на сервер разработчика Web-страницы. Типичный пример использования форм — регистрация пользователей Web-узла. Посетителю при первом обращение к Web-странице предлагается ввести в поля формы информацию о себе: фамилию, имя и отчество, год рождения, пол, род занятий. В форме могут быть представлены списки телеконференций, групп по интересам и прочих неформальных объединений, в которых посетитель может принять участие (или подписаться на них), выбрав соответствующий пункт списка, переключатель или флажок. Регистрация посетителей полезна как самим пользователям, поскольку позволяет им выбрать приемлемую конфигурацию предоставления услуг, так и разработчикам, так как дает возможность оценить качественный и количественный состав потенциальных клиентов. Такая оценка поможет спланировать дальнейшее развитие и продвижение Web-узла для достижения максимальной эффективности и популярности среди пользователей.

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

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

Проверка полей формы

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

<INPUT TYPE='text' NAME='first_name' SIZE='30' ONCHANGE="var pattern=/['0-9',',',':']/; if(pattern.test(this.value))
alert('Проверьте данные в поле Имя');"> Имя

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

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

var имя_переменной = /[список запрещенных символов]/

В списке можно указывать диапазон символов:

• '0-9' или '\d' – все цифры;
• 'а-я' — все строчные буквы кириллицы;
• 'A-Я' — все прописные буквы кириллицы;
• 'А-я' — все буквы кириллицы;
• 'a-z' – все строчные латинские буквы (первая буква — латинская «а»);
• 'A-Z' – все прописные латинские буквы (первая буква — латинская «А»);
• 'A-я' – все буквы (первая буква — латинская «А»);
• '\w' – все буквы, цифры и символ подчеркивания «_»;
• '\s' – символы пробела, табуляции и абзаца.

Далее в сценарии используется конструкция с оператором if. Если условие оператора if выполняется (в данном случае функция test обнаруживает в значении текущего элемента управления this.value символы, представленные в переменной pattern), выполняется команда, следующая за оператором if(условие). В данном примере используется функция alert, которая покажет на экране окно сообщения с предупреждением о том, что в поле введено неверное значение.

В примере выше в переменной pattern мы указали диапазоны символов, которые не должны использоваться в поле. Можно поступить наоборот — указать диапазон допустимых символов. Например, в следующем примере указывается, что в поле допустимо использовать только прописные и строчные буквы кириллического алфавита:
ONCHANGE="var pattern=/[А-я]/; if(!pattern.test(this.value)) alert('Проверьте данные в поле');"

Обратите внимание на восклицательный знак перед функцией pattern.test. Это логический оператор отрицания, который изменяет значение, возвращенное функцией test, на противоположное, т. е. Окно с предупреждением будет показано в том случае, если введенные символы не будут принадлежать диапазону, указанному в переменной pattern.

Передача данных на сервер

Для передачи данных на сервер используется метод формы submit(). Метод можно вызвать непосредственно в коде сценария: имя_формы.submit(), но чаще данные передаются с помощью специальной кнопки Подача запроса. Эта кнопка создается следующим образом:

<INPUT TYPE='submit'>

Щелчок на кнопке Подачи запроса автоматически вызывает для формы метод submit(). Адрес, по которому передаются данные, и способ передачи устанавливаются в атрибутах дескриптора <FORM>.

• ACTION – строка передачи данных:
  • URL-адрес Web-сервера и имя файла программы обработки данных;
  • адрес электронной почты в формате "mailto:адрес_электронной_почты".
• METHOD – метод передачи get или post; отличается форматом передачи данных и именем стандартной переменной среды Web-сервера, которой будет присвоена строка "имя_поля=значение,...".

В формах используется еще одна полезная специальная кнопка — Сброс. Кнопка создается следующим образом:

<INPUT TYPE='reset'>

Кнопка Сброс вызывает для формы метод reset(), который восстанавливает поля формы в том виде, в каком они были установлены по умолчанию.

Кнопки типов submit и reset имеют такой же набор атрибутов и событий, как и обычные кнопки. Можно заменить стандартные подписи кнопок Подача запроса и Сброс на другие, присвоив текст подписи атрибутам VALUE. Примите к сведению, что стандартные подписи кнопок выводятся операционной системой пользователя, т. е. На компьютере с англоязычным интерфейсом Windows будут выведены надписи Submit и Reset, а на Windows с китайским языком эти кнопки будут выведены по-китайски. В результате назначения этих важных кнопок будет понятным любому пользователю. Если же вы зададите альтернативные надписи, они останутся такими на компьютерах всех пользователей.

Иногда бывает необходимо выполнить сценарий во время передачи данных. Если вы присвоите выполнение сценария событию ONCLICK кнопки submit или reset, они перестанут выполнять свои непосредственные функции. Воспользуйтесь для решения этой проблемы событиями формы ONSUBMIT и ONRESET. Впрочем, передачу данных формы можно организовать из любого сценария, добавив в конце функции обработки события строку

document.имя_формы.submit().

Пример формы с кнопками Подача запроса и сброс приведен ниже.

<FORM NAME="form1" ACTION="mailto:mymail@mail.ru" METHOD="post">
    <INPUT TYPE="text" NAME="text1" >
    <INPUT TYPE='submit'/><INPUT TYPE='reset'/>
</FORM >

В данной форме установлена передача текста поля text1 по адресу mymail@mail.ru методом post. После щелчка на кнопке Подача запроса обозреватель покажет окно с предупреждением о небезопасной передачи данных.

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