Простейшая форма отправки данных на почту при помощи HTML и PHP. HTML-формы. Методы отправки данных на сервер с помощью формы

/php/php5ru.png HTTP/1.0

: www.php5.ru

По экрану пробежит то, что бы вы увидели, если б просмотрели этот png -файл в текстовом редакторе.

HTML-формы. Методы отправки данных на сервер с помощью формы

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

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

С HTML -формами Вы уже встречались при изучении языка разметки HTML .

Рассмотрим пример посылки сообщения из формы по электронной почте.

Листинг e_mail.html. Посылка сообщения из формы по e-mail

Посылка формы по е-mail

Нажмите “Cброс” и заполните заказ.


Если обработать этот HTML-код браузером, то отобразится web -страница, которую можно увидеть на экране монитора:

Пользователь нажимает кнопку «Сброс» , и поля принимают значения, установленные по умолчанию. Форма заполняется пользователем, и по нажатию кнопки «Послать заказ» отправляется по адресу Этот адрес e-mail защищен от спам-ботов. Чтобы увидеть его, у Вас должен быть включен Java-Script . Обычно браузер не сам отсылает форму, а поручает эту работу почтовой программе, установленной по умолчанию в операционной системе компьютера (например, Outlook). Письмо посылается в виде:

subjct: Форма отправлена из Microsoft Internet Explorer

name = Прохоров Виктор Сергеевич

value= Этот адрес e-mail защищен от спам-ботов. Чтобы увидеть его, у Вас должен быть включен Java-Script

obj = «Методические указания»

Письмо составляется из пар имя=значение , которые выбираются по порядку из полей формы.

Рассмотрим подробнее следующий пример.

Листинг form_1.html

Введите Ваше имя:

Сохранив этот код в HTML-файле form_1.html и просмотрев его с помощью браузера, можно увидеть HTML-форму:

Форма реализована тегом-контейнером . Тег своими атрибутами указывает:

Адрес сценария, которому будет послана форма;

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

Атрибуты тега-контейнера
(
все необязательные):

? action --атрибут, в качестве значения которого указывают URL -адрес (полный или относительный) запрашиваемой CGI -программы. Эта программа будет обрабатывать данные, содержащиеся в форме. Допустимо использовать запись MAILTO:URL. В этом случае форма будет послана по электронной почте. Если атрибут action не указать, то содержимое формы будет отправлено на URL- адрес, с которого загружена данная web-страница, то есть "саму на себя". Это удобное сокращение, но по стандарту HTML атрибут action обязателен.

? method -- определяет метод HTTP , используемый для пересылки данных формы от браузера к серверу. Атрибут method может принимать два значения: get или post:

¦ get - отправка данных формы в адресной строке. Вы могли заметить на различных сайтах присутствие в конце URL символа "?" и следующих за ним данных в формате параметр=значение. Здесь "параметр" соответствует значению атрибута name элементов формы (см. ниже про тэг ), а "значение" - содержимому атрибута value (в нем, например, содержится ввод пользователя в текстовое поле того же тэга ).

Для примера - попробуйте поискать что-нибудь в Яндексе и обратите внимание на адресную строку браузера. Это и есть способ get.

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

Если атрибут method не указан - подразумевается "get" .

? enctype -- необязательный атрибут. Указывает тип содержимого формы, используемый для определения формата кодирования при ее пересылке. В HTML определены два возможных значения для атрибута enctype :

¦ APPLICATION/X-WWW-FORM-URLENCODED (используется по умолчанию).

¦ MULTIPART/FORM-DATA.

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

Тэг - задает элемент формы, определяемый атрибутом type :

¦ Значение "text" задает однострочное текстовое поле ввода.

¦ Значение "submit" задает кнопку, при нажатии которой происходит отправка формы на сервер.

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

Итак, что же происходит, когда нажимают кнопку "OK"?

1. Браузер просматривает входящие в форму элементы и формирует из их атрибутов name и value данные формы. Допустим, введено имя Vasya . В этом случае данные формы: name=Vasya&okbutton=OK.

2. Браузер устанавливает соединение с сервером, отправляет на сервер запрос документа, указанного в атрибуте action тэга , используя метод отправки данных, указанный в атрибуте method (в данном случае - GET ), передавая в запросе данные формы.

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

4. Браузер отображает полученный от сервера документ.

Отправка того же запроса вручную (с помошью telnet ) выглядит следующим образом (предположим, что доменное имя сайта - www.example.com ).

Сама форма обычно предназначена для получения от пользователя информации для дальнейшей пересылки её на сервер, где данные формы принимает программа-обработчик. Такая программа может быть написана на любом серверном языке программирования вроде PHP, Perl и др. Адрес программы указывается в атрибуте action тега , как показано в примере 1.

Пример 1. Отправка данных формы

HTML5 IE Cr Op Sa Fx

Данные формы

В этом примере данные формы, обозначенные атрибутом name (login и password ), будут переданы в файл по адресу /example/handler.php. Если атрибут action не указывать, то передача происходит на адрес текущей страницы.

Передача на сервер происходит двумя разными методами: GET и POST, для задания метода в теге
используется атрибут method , а его значениями выступают ключевые слова get и post . Если атрибут method не задан, то по умолчанию данные отправляются на сервер методом GET. В табл. 1 показаны различия между этими методами.

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

http://www.google.ru/search?q=%D1%81%D0%B8%D1%81%D1%8C%D0%BA%D0%B8&ie=utf-8

Уникальное сочетание параметров в адресной строке однозначно идентифицирует страницу, так что страницы с адресами?q=node/add и?q=node считаются разными. Эту особенность используют системы управления контентом (CMS, Content management system) для создания множества страниц сайта. В реальности же используется один файл, который получает запрос GET и согласно ему формирует содержимое документа.

Ниже перечислены типовые области применения этих методов на сайтах.

GET

Передача небольших текстовых данных на сервер; поиск по сайту.

Поисковые системы, формы поиска по сайту всегда отправляются методом GET, это позволяет делиться результатами поиска с друзьями, слать ссылку по почте или выкладывать её на форуме.

POST

Пересылка файлов (фотографий, архивов, программ и др.); отправка комментариев; добавление и редактирование сообщений на форуме, блоге.

Работа с формой по умолчанию происходит в текущей вкладке браузера, при этом допустимо при отправке формы изменить этот параметр и открывать обработчик формы в новой вкладке или во фрейме. Такое поведение задаётся через «имя контекста», которое выступает значением атрибута target тега . Популярные значения это _blank для открытия формы в новом окне или вкладке, и имя фрейма, которое задаётся атрибутом name тега

В данном примере при нажатии на кнопку «Отправить» результат отправки формы открывается во фрейме с именем area .

Элементы формы традиционно располагаются внутри тега
, тем самым определяя те данные, которые будут передаваться на сервер. В то же время в HTML5 есть возможность отделить форму от её элементов. Это сделано для удобства и универсальности, так, сложный макет может содержать несколько форм, которые не должны пересекаться меж собой или к примеру, некоторые элементы выводятся с помощью скриптов в одном месте страницы, а сама форма находится в другом. Связь между формой и её элементами происходит в таком случае через идентификатор формы, а к элементам следует добавить атрибут form со значением, равным этому идентификатору (пример 3).

Пример 3. Связывание формы с полями

HTML5 IE Cr Op Sa Fx

Форма

В этом примере тег
однозначно отождествляется через идентификатор auth , а к полям, которые следует отправить с помощью формы, добавляется form="auth" . При этом поведение элементов не меняется, при нажатии на кнопку логин и пароль пересылаются на обработчик handler.php.

Хотя параметры передачи формы традиционно указываются в теге , их можно перенести и в кнопки отправки формы (

Ваше имя: Ваш адрес: Прислать: