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

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

HTML5 IE Cr Op Sa Fx

Какой метод используется легко определить по адресной строке браузера. Если в ней появился вопросительный знак и адрес стал похож на этот, то это точно 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 тега

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

HTML5 IE Cr Op Sa Fx

Хотя параметры передачи формы традиционно указываются в теге , их можно перенести и в кнопки отправки формы ( и ). Для этого применяется набор атрибутов formaction , formmethod , formenctype и formtarget , которые являются аналогами соответствующих атрибутов без приставки form. В примере 4 показано использование этих атрибутов.

Пример 4. Отправка формы

HTML5 IE Cr Op Sa Fx

Все новые атрибуты форм не поддерживаются некоторыми браузерами, в частности, Internet Explorer и Safari.

Лабораторная работа 1. Протокол HTTP. Методы GET, POST. HTML формы.

Теоретическая часть

Жизненный цикл запроса в протоколе HTTP

1. Браузер открывает соединение с сервером
2. Браузер отправляет серверу запрос на получение страницы
3. Сервер формирует ответ (чаще всего - HTML-код) браузеру и закрывает соединение
4. Браузер обрабатывает HTML-код и отображает страницу

Обратите внимание на выделенное жирным . Еще до того, как вы увидели на экране запрошенную страницу, соединение с сервером закрыто, и он о вас забыл. И когда вы введете другой (или тот же самый) адрес, или щелкните по ссылке, или нажмете на кнопку HTML-формы - та же схема повторится снова.

Такую схему работы называют "клиент-сервер" . Клиент в данном случае - браузер.

Итак, соединение с веб-сервером длится всего несколько секунд (или долей секунд) - это промежуток времени между щелчком по ссылке (или другим способом запроса) и началом отображения страницы. Большинство браузеров во время соединения отображают некий индикатор, например, MS Internet Explorer отображает анимацию в правом верхнем углу.

Чтобы навсегда избавиться от восприятия HTTP как "черного ящика", "притворимся" браузером с помощью telnet"а:

1. Запустим telnet ya.ru 80
2. Введем в окне терминала следующее (если ввод не отображается - ничего страшного):

GET / HTTP/1.0 [здесь нажмем Enter]
Host: ya.ru [здесь нажмем Enter дважды]

Нажатие Enter соответствует, как правило, комбинации символов CR + LF, обозначаемых как \r\n . Далее будет использоваться именно это обозначение.

По экрану пробежит HTML-код страницы http://ya.ru/. Как видите - ничего сложного.

Исходный код текущей страницы можно просмотреть практически в любом браузере, выбрав в меню "View|Source".

Картинки, фреймы - все это дополнительные запросы, точно такие же. Собственно, откуда берутся картинки в окне браузера: при парсинге (обработке) HTML-кода, браузер, натыкаясь на тэг https://i1.wp.com/картинка "> осуществляет дополнительный запрос к серверу - запрос картинки , и отображает ее на месте, где стоит тэг .

Попробуйте:

Telnet www.google.ru 80

GET /php/php5ru.png HTTP/1.0 \r\n
Host: ya.ru \r\n\r\n

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

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

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

2. Введите Ваше имя:
3. 
   

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

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

Рассмотрим используемые в этом небольшом примере тэги подробнее.

Тэг

, имеющий парный завершающий тэг

, собственно и задает форму. Его атрибуты - оба необязательные:

• action - указывает URL (полный или относительный), на который будет отправлена форма. Отправка формы - это такой же запрос к серверу, как и все остальные (как я уже описал выше).

Если этот атрибут не указать, большинство браузеров (точнее говоря, все известные мне браузеры) отправляют форму на текущий документ, то есть "саму на себя". Это удобное сокращение, но по стандарту HTML атрибут action обязателен.

• method - способ отправки формы. Их два.
• GET - отправка данных формы в адресной строке.
  Вы могли заметить на различных сайтах присутствие в конце URL символа "?" и следующих за ним данных в формате параметр=значение . Здесь "параметр" соответствует значению атрибута name элементов формы (см. ниже про тэг ), а "значение" - содержимому атрибута value (в нем, например, содержится ввод пользователя в текстовое поле того же тэга ).
  Для примера - попробуйте поискать что-нибудь в Яндексе и обратите внимание на адресную строку браузера. Это и есть способ GET.
• POST - данные формы отправляются в теле запроса . Если не совсем понятно (или совсем непонятно), что это такое - не беспокойтесь, скоро мы к этому вопросу вернемся.

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

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

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

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

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

1. Браузер просматривает входящие в форму элементы и формирует из их атрибутов name и value данные формы . Допустим, введено имя Vasya . В этом случае данные формы - name=Vasya&okbutton=OK
2. Браузер устанавливает соединение с сервером, отправляет на сервер запрос документа, указанного в атрибуте action тэга
   , используя метод отправки данных, указанный в атрибуте method (в данном случае - GET), передавая в запросе данные формы.
3. Сервер анализирует полученный запрос, формирует ответ, отправляет его браузеру и закрывает соединение
4. Браузер отображает полученный от сервера документ

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

telnet www.example.com 80

GET /cgi-bin/form_handler.cgi?name=Vasya&okbutton=OK HTTP/1.0 \r\n
Host: www.example.com \r\n
\r\n

Как вы, скорее всего, уже догадались, нажатие submit-кнопки в форме с методом отправки "GET" аналогично вводу соответствующего URL (со знаком вопроса и данными формы в конце) в адресной строке браузера: http://www.example.com/cgi-bin/form_handler.cgi?name=Vasya&okbutton=OK

На самом деле, метод GET используется всегда, когда вы запрашиваете с сервера какой-либо документ, просто введя его URL, или щелкнув по ссылке. При использовании , к URL просто добавляются знак вопроса и данные формы.

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

Мы указали метод отправки "POST". В этом случае данные отправляются на сервер несколько другим способом:

telnet www.example.com 80

POST /cgi-bin/form_handler.cgi HTTP/1.0 \r\n
Host: www.example.com \r\n
Content-Type: application/x-www-form-urlencoded \r\n
Content-Length: 22 \r\n
\r\n
name=Vasya&okbutton=OK

При использовании метода POST данные формы отправляются уже после "двух Enter-ов" - в теле запроса. Все, что выше - на самом деле заголовок запроса (и когда мы использовали метод GET, данные формы отправлялись в заголовке). Для того, чтобы сервер знал, на каком байте закончить чтение тела запроса, в заголовке присутствует строка Content-Length ; о том же, что данные формы будут переданы виде параметр1=значение1&параметр2=значение2... , причем значения передаются в виде urlencode - то есть, точно так же, как и с помощью метода GET, но в теле запроса, - серверу сообщает заголовок "Content-Type: application/x-www-form-urlencoded".

Преимущество метода POST - отсутствие ограничения на длину строки с данными формы.

При использовании метода POST невозможно отправить форму, просто "зайдя по ссылке", как было с GET.

При использовании POST-формы, в ее атрибуте action можно указать после знака вопроса и параметры GET-формы. Таким образом, метод POST включает в себя и метод GET.

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

HTML форма отправки данных

Форма на странице формируется тегами ..., внутри которых помещаются теги полей для ввода текстовой информации, теги специальных компонентов (например, поле со списком), теги для поля выбора и загрузки файла .

* Для HTML5 так же существует возможность размещать теги полей формы не внутри тегов формы, а в любом месте на странице. При этом для каждого такого поля нужно указывать атрибут "form", чтобы определить с какой формой отправки он должен взаимодействовать.

Итак, простейшая форма отправки может содержать следующий код:

Значение А:
Значение Б:

Элементы формы и их параметры:

action="myform.php" – атрибут "action" определяет, какой php-файл будет обрабатывать отправляемые данные. В этом примере, данные будут отправлены в файл "myform.php", находящийся в той же директории что и страница с формой. Если этот атрибут не указать явно, данные формы будут отправлены по адресу страницы самой формы.

method="post" – параметр method определяет метод передачи данных POST или GET. Более подробно об этом в статье "Отличия методов POST или GET" . Если не указывать атрибут явно, по умолчанию будет использоваться метод GET.

Текст "Значение А:" и "Значение Б:" добавлен только с целью оформления и понятности формы для пользователя. Добавлять это для передачи данных не обязательно, но для того, чтобы пользователю стало понятно, что вводить, стоит указывать.

Теги используются для формирования различных управляющих элементов формы.

type="text" – атрибут "type" определяет вид поля. В зависимости от того, какой тип указан, меняется и внешний вид элемента, и его назначение. Значение атрибута "text" указывает, что в браузере элемент будет отображаться однострочным текстовым полем, куда пользователь сможет ввести свою строку.

name="data1" – атрибут "name", указывает имя, вернее индекс данных в массиве, полученных сервером. Это обязательный параметр, по которому в php-обработчике можно будет затем получить доступ переданному значению. Имя может быть выбрано произвольно, однако, удобнее когда это значение имеет какой-то понятный смысл.

type="submit" – тег с таким значением параметра "type" будет отображаться на странице как кнопка. На самом деле на форме можно обойтись и без кнопки. Если, например, в форме есть текстовые поля, то отправку можно осуществить, просто нажав "Ввод" на клавиатуре. Но наличие кнопки делает форму более понятной.

value="Отправить" – в данном случае (для type="submit") определяет только надпись на кнопке. Для type="text", например, это будет текст, который будет выведен в текстовом поле.

В итоге, на странице этот код будет выглядеть приблизительно так:

Значение А:
Значение Б:

По нажатию на кнопку, будет выполнена отправка данных на указанную страницу, и если она существует и корректно работает, данные будут обработаны.

Обработка отправленных HTML формой данных в PHP

Отправленные описанным способом данные, помещаются в суперглобальные массивы $_POST, $_GET и $_REQUEST. $_POST или $_GET будут содержать данные в зависимости от того, каким методом осуществлялась отправка. $_REQUEST содержит отправленные данные любым из указанных методов.

$_POST, $_GET и $_REQUEST – это ассоциативные массивы, поля-индексы которых совпадают с атрибутами "name" тегов . Соответственно, для работы с данными в файле myform.php можно присвоить переменным значения элементов такого массива указав в качестве индекса имя поля:

// для метода GET
$a = $_GET["data1" ];
$b = $_GET["data2" ];

// для метода POST
$a = $_POST["data1" ];
$b = $_POST["data2" ];

// при любом методе
$a = $_REQUEST["data1" ];
$b = $_REQUEST["data2" ];

Проверка заполнения полей формы

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

if (empty ($_REQUEST["data1" ])) {
echo "Поле не заполнено" ;
} else {
echo "Поле было заполнено" ;
$a = $_REQUEST["data1" ];
}

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

if (isset ($_REQUEST["data1" ])) {
echo "Поле было заполнено" ;
$a = $_REQUEST["data1" ];
} else {
echo "Поле не заполнено" ;
}

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

. Рассмотрим каждый из этих методов в подробности.

Метод GET

Метод GET использует для передачи данных строку URL. Возможно, Вы обращали внимание на длинные и непонятные URLы. Например: function.php?login=Alex&email=dezyakin . В данном случае данные обрабатываются в function.php. После знака вопроса "? " идет перечисление передаваемых параметров (параметр разделяются знаком "&") со значениями: параметру login присвоено значение Alex, а переменной email значение dezyakin. Данные будут хранится в суперглобальном массиве $_GET . Приведем пример использования метода GET представлен ниже:

Login : E-mail : С помощью суперглобального массива $_GET выводим принятые значения: */ echo "
login = ". $_GET["login"] ; echo "
email = ". $_GET["email"] ; ?>

Обратите внимание на то, как мы считываем значения из суперглобального массива $_GET: $_GET["имя_переменной"] . В нашем примере имена переменных были объявлены в форме (name=login и name=email).

Совет :
Прежде чем обрабатывать полученные значения советую проверять их на существование через функции isset(имя_переменной) или empty(имя_переменной) - эти функции были рассмотрены в предыдущем уроке 2: переменные в PHP . Например:

проверка на существование с помощью isset: if isset ($_GET["login"] ) { операторы для обработки login ... } //или же проверить на существование с помощью empty: if empty ($_GET["email"] ) { операторы для обработки email ... } ?>

В форме можно указать имя файла, который будет обрабатывать передаваемые значения. Делается это с помощью атрибута формы action , которому можно присвоить адрес этого файла. По умолчанию этот файл присвоен текущему файлу (т.е. обрабатывается в файле, где и расположена форма). Приведем пример, в котором данные из формы передаются на обработку в файл srcipt.php :

Login : E-mail :

В файле script.php должен содержатся какой-то обработчик информации, иначе информация будет передана в пустую.

Метод GET обладает множеством недостатков:

• Пользователь видит значения передаваемых параметров;
• Пользователь может легко подделать передаваемые параметры;
• Неудобная передача бинарной информации (приходится кодировать в текстовый формат);
• Объем передаваемых данных ограничен - 8 Кбайт;

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

Метод POST

Метод POST отличается от GET тем, что данные передаются в закрытой форме. Существует суперглобальный массив $_POST , из которого можно считывать данные следующим образом: $_POST["имя_переменной"] . Например:

Login : "> E-mail : ">

С помощью суперглобального массива $_POST выводим принятые значения: */ echo "
login = ". $_POST["login"] ; echo "
email = ". $_POST["email"] ; ?>

Результат выполнения выше описанного кода представлен на рисунке ниже:

Как видите URL не имеет никакой приписки, но тем не менее данные были получены и выведены.

Примечание :
1) Объем передаваемых значений методом POST по умолчанию ограничен и равен 8 Мбайт. Чтобы увеличить это значение нужно изменить директиву post_max_size в php.ini.

2) В ранних версиях PHP вместо коротких названий суперглобальных массивов $_GET и $_POST использовались более длинные имена: $HTTP_GET_VARS и $HTTP_POST_VARS . По умолчанию они выключены в php 5, но Вы можете их включить в конфигурационном файле php.ini с помощью параметра register_long_arrays . В php 6 версии эти длинные названия будут недоступны.

3) Перед обработкой переменных из $_POST , советую проверять переменные на их наличие, также как это делалось с методом GET .