E-mail из формы

Отправка электронной почты из формы

Обработка данных форм более подробно рассмотрена в моей книге "Самоучитель JavaScript", 2003, издательство "Питер"
Здесь рассматривается пример формы для отправки сообщения по электронной почте. Заметим, что при щелчке на кнопке типа submit (отправить) в этой форме в большинстве случаев вызывается установленная на компьютере пользователя программа почтового клиента. Если вы работаете в IE6, а почтовый клиент - Outlook Express, то вроде бы все хорошо. Чаще всего окна почтового клиента не миновать, но тогда нужно просто отправлять из него.
Внимание: если вы собираетесь копировать приведенные здесь скрипты, то обратите внимание на примечание в конце этой страницы.

Ниже приведен работающий пример формы, данные из которой можно отправить по эл. почте.

Можно сделать и так, чтобы адрес получателя был фиксированным. Так делают для отправки почты автору сайта. Такие элементы HTML-документа, как поля ввода данных, текстовые области, переключатели и флажки, раскрывающиеся списки и кнопки, можно объединить в так называемую форму. В HTML форма создается с помощью контейнерного тега < FORM>, внутри которого располагаются теги элементов этой формы. В объектной модели документа каждой форме соответствует свой объект, входящий в коллекцию forms. Заметим, что любой из перечисленных выше элементов можно использовать вне всякой формы. Однако форма не просто контейнер, а контейнер и объект, предназначенные главным образом для организации отправки на сервер всех данных, имеющихся в элементах этой формы (например, введенных пользователем). Давным-давно, когда браузеры воспринимали только простой HTML и не работали со сценариями, форма была единственным средством поддержки интерактивности. Как раньше, так и теперь, для отправки данных на сервер сценарий не обязателен. Чтобы отправить данные, достаточно в теге < FORM> указать атрибут ACTION, а в самой форме установить кнопку типа Submit. Щелчок на этой кнопке инициализирует отправку данных. Если атрибут ACTION не указан или его значение пусто, данные формы не будут отправлены, даже если вы щелкните на кнопке типа Submit.
Итак, для отправки данных формы атрибут ACTION должен иметь некоторое значение. В общем случае это - URL-адрес файла или CGI-программы, которая получает и обрабатывает отправленные данные. Например, ACTION = "http://www.myserver/cgi/ myprogram.pl". Если вы хотите отправлять данные формы по электронной почте, то значением ACTION является строка вида:

mailto:адрес_e-mail
Можно также указать тему (subject) сообщения:
mailto:адрес_e-mail?subject=тема_сообщения

Кроме атрибута ACTION в теге < FORM> следует указать еще два атрибута: METHOD и ENCTYPE. Атрибут METHOD имеет значение POST или GET. Выбор значения отражается лишь на форме, в которой передаются данные. Если у вас нет особых причин задуматься об этом, выбирайте значение POST. Атрибуту ENCTYPE присвойте значение "text/plain". В этом случае отправляемое сообщение будет представлять собой последовательность пар вида имя_элемента=значение. Здесь имя_элемента - значение атрибута NAME в теге элемента, содержащегося в форме, а значение - значение атрибута VALUE в этом же теге. Если не указать атрибут ENCTYPE, то сообщение будет представлено в неудобочитаемом (закодированном) виде. Вот пример HTML-документа с формой, содержащей поле ввода данных и кнопку типа Submit:
<HTML> <FORM METHOD = POST ACTION = "mailto:mumu@gerasim.ru" ENCTYPE="text/plain"> <INPUT NAME = "Сообщение" TYPE = "text" VALUE = ""> <INPUT NAME = "Отправить" TYPE="submit" VALUE = "Отправить"> </FORM> </html>
Отправка данных рассмотренной выше формы произойдет при щелчке на кнопке типа Submit, на которой в нашем примере выводится надпись "Отправить". Адрес получателя указан как значение атрибута ACTION в теге

. Если перед отправкой данных формы требуется предварительно их проверить или еще что-нибудь сделать, то для этого необходим сценарий. В следующем примере проверяется, имеется ли символ "@" в поле ввода адреса электронной почты получателя, и не пусто ли поле ввода собственно сообщения. Если символа "@" в адресе нет или поле сообщения пусто, то отправка не производится. Сценарий обрабатывает событие onsubmit, возникающее при щелчке на кнопке типа Submit.

Если отправить данные формы, показанной выше, то адресат получит сообщение в следующем виде:

email_to=xxx@yyyy.ru
email_from=qqq@wwww.ru
Сообщение=Привет
Отправить=Отправить

В приведенном выше примере мы делаем поверхностную проверку данных, введенных пользователем в форму. Если данные не удовлетворяют нашему критерию правильности, то мы должны предотвратить их отправку. Это можно сделать двумя способами. Первый способ заключается в присвоении свойству returnValue значения false (как в нашем примере). Тогда отменяется стандартная реакция на событие, в данном случае - реакция на событие onsubmit (отправка сообщения). Второй способ заключается в присвоении свойству action пустого значения. В нашем примере значение action пусто по умолчанию, поэтому выражение event.returnValue = false является излишним, но зато делает код сценария более понятным. В контексте нашего HTML-кода сценарий мог бы выглядеть и следующим образом:
<SCRIPT> function myform.onsubmit(){ var noemail = myform.email_to.value.indexOf('@') == - 1 var notext = !myform.Сообщение.value var xtext = "\nПисьмо не отправлено" if (noemail || notext){ if (noemail) alert("Неправильный адрес получателя" + xtext) else alert("Нет текста сообщения" + xtext) } else myform.action = "mailto:" + myform.email_to.value // значение ACTION } </SCRIPT>

На веб-страницах нередко размещают ссылку или кнопку, открывающую форму отправки сообщения по электронной почте автору страницы. В этом случае не нужно вводить почтовый адрес получателя. Очевидно, что этот адрес уже присвоен в качестве значения атрибуту ACTION в теге . Если вы хотите затруднить его выявление отправителем сообщения или, что важнее, различными программами-роботами, сканирующими веб-страницы с целью выявления адресов электронной почты, то следует предпринять некоторые меры. Самый простой рецепт - хранить отдельные компоненты адреса в различных переменных и собирать их с помощью выражения конкатенации (склейки), которое присваивается свойству action. В результате программа-робот не найдет в HTML-документе строки символов, имеющей структуру адреса электронной почты. Ниже приводится пример HTML кода, воплощающий эту нехитрую идею.
<HTML> <FORM ID = "myform" METHOD=POST ACTION="" ENCTYPE="text/plain" style="background:'e0e0e0'"> <H2>Отправка почты автору</H2> От кого: <INPUT NAME="email_from" TYPE = "text" VALUE = ""> <P> Сообщение:<BR> < TEXTAREA NAME = "Сообщение" TYPE = "text" VALUE = "">< /TEXTAREA> <P> <! Кнопка типа Submit > <INPUT NAME = "Отправить" TYPE = "submit" VALUE = "Отправить"> </FORM> <SCRIPT> var first = "mumu", second = "gerasim" function myform.onsubmit(){ if (!myform.Сообщение.value){ event.returnValue = false // отменить отправку alert("Нет текста сообщения \nПисьмо не отправлено") } else myform.action = "mailto:" + first + "@" + second + ".ru" /* значение ACTION */ } </SCRIPT> </HTML>

Примечание. В текстах приведенных здесь примеров в тэгах < textarea> и < /textarea> после левого уголка установлен пробел, чтобы эти тэги не интерпретировались. Если вы копируете эти примеры, то перед их выполнением уберите пробелы в указанных местах.

Сайт автора