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

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

Все вышеперечисленные моменты будут рассмотрены в нашем обзоре и подробно прокомментированы.

Итак, начинаем создание формы обратной связи:

HTML

В первую очередь мы пишем HTML код, в нем задаются поля, которые будет заполнять пользователь. Они же в дальнейшем будут оформляться. Код формы выглядит следующим образом:

< form method= "post" action= "mail.php" > < div class = "left" > < label for = "name" > Имя: < input maxlength= "30" type= "text" name= "name" /> < label for = "phone" > Телефон: < input maxlength= "30" type= "text" name= "phone" /> < label for = "mail" > E- mail : < input maxlength= "30" type= "text" name= "mail" /> < div class = "right" > < label for = "message" > Сообщение: < textarea rows= "7" cols= "50" name= "message" > < input type= "submit" value= "Отправить" />

И визуально она выглядит сейчас следующим образом:

Согласен, пока все некрасиво и ничего не понятно, но мы только начали.

Рассмотрим приведенный выше код подробно:

• < form method= "post" action= "mail.php" > …

  
  для того, чтобы создать форму необходимо использовать тег form. Именно он определяет начало и конец формы для интерпретатора кода. У него, как и у любого тега, есть целый набор атрибутов, но обязательных для работы формы всего два, это method (метод отправки запроса на сервер, для форм стандартно используют post) и action (указывает путь к файлу-обработчику формы, именно в этом файле будет содержаться скрипт на PHP, который после будет отправлять введенные пользователем значения нам на почту, в нашем случае мы видим, что это файл называется mail.php и лежит он в том же директории сайта, что и рассматриваемая нами страница).

• < input maxlength= "30" type= "text" name= "name" />

  
  Далее у нас следуют инпуты. Это собственно сами поля формы в которые пользователи будут вводить необходимую нам информацию (type="text" говорит о том, что это будет текст). Атрибут maxlength указывает сколько символов может ввести пользователь в данное поле формы. Самый важный атрибут это name – он задает имя конкретного поля. Именно по этим именам в дальнейшем PHP скрипт будет обрабатывать поступающую в него информацию. При желании можно еще задать атрибут placeholder, который выводит внутри поля текст исчезающий при установке курсора внутри нее. Одной из проблем плейсхолдера является то, что он не поддерживается некоторыми старыми браузерами.

• < label for = "name" > Имя:

  
  Используется в случае если мы отказались от плейсхолдеров. Обычная подпись поля, атрибут for сообщает к какому конкретно полю относится данная подпись. Значением указывается name интересующего нас поля.

• < textarea rows= "7" cols= "50" name= "message" >

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

• < input type= "submit" value= "Отправить" />

  
  О том, что это кнопка для отправки формы нам сообщает type="submit", а value задает текст, который будет внутри этой кнопки.

• < div class = "right" >

  
  использованы только для дальнейшего визуального оформления формы.

CSS

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

Мы использовали данный код:

form { background: #f4f5f7; padding: 20px; } form . left, form . right { display: inline- block; vertical- align: top; width: 458px; } form . right { padding- left: 20px; } label { display: block; font- size: 18px; text- align: center; margin: 10px 0px 0px 0px; } input, textarea { border: 1px solid #82858D; padding: 10px; font- size: 16px; width: 436px; } textarea { height: 98px; margin- bottom: 32px; } input[ type= "submit" ] { width: 200px; float: right; border: none; background: #595B5F; color: #fff; text- transform: uppercase; }

Подробно расписывать CSS я не вижу смысла, обращу Ваше внимание лишь на ключевые моменты:

1. Не стоит писать оформление под каждый тег в форме. Старайтесь строить свои селекторы так, чтобы парой строк кода оформлять все необходимые Вам элементы.
2. Не используйте для переноса строк и создания отступов лишние теги по типу < br>, < p> и тд, с этими задачами прекрасно справляется CSS со свойством display: block и margin с padding. Больше о том, почему не стоит пользоваться < br> в верстке вообще можете почитать в статье Тэг br, а так ли он нужен? .
3. Не стоит пользоваться табличной версткой для форм. Это противоречит семантике этого тега, а поисковики любят семантичный код. Для того, чтобы формировать визуальную структуру документа нам достаточно тегов div, и заданных им в CSS свойств display: inline-block (выстраивает блоки в ряд) и vertical-align: top (не дает им разбежаться по экрану), задаем им необходимую высоту и вуаля, ничего лишнего и все расположено так, как нам нужно.

Для желающих экономить свое время на оформлении сайтов могу посоветовать пользоваться CSS фреймворками при создании сайтов, особенно самописных. Мой выбор в этом плане- Twitter Bootstrap . Урок по оформлению форм с его использованием можно посмотреть .

PHP

Ну вот и пришло время сделать нашу форму работоспособной.

Заходим в наш корневой каталог сайта и создаем там файл mail.php, к которому мы ранее указывали путь в атрибуте action тега form.

В конечном итоге его код будет выглядеть следующим образом:

\" javascript: history.back()\" >Вернуться назад

Обсуждение HTML и CSS части этого документа можно пропустить. По своей сути это обычная страница сайта, которую Вы можете оформить по своему желанию и необходимости. Рассмотрим же важнейшую ее часть – PHP скрипт обработки формы:

$back = "

\" javascript: history.back()\" >Вернуться назад

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

if (! empty ($_POST [ "name" ] ) and ! empty ($_POST [ "phone" ] ) and ! empty ($_POST [ "mail" ] ) and ! empty ($_POST [ "message" ] ) ) { //внутрення часть обработчика } else { echo "Для отправки сообщения заполните все поля! $back " ; exit ; }

Тут мы прикручиваем проверку формы на наполненность полей. Как вы догадались, в части $_POST["name"] в кавычках мы пишем значение атрибута name наших инпутов.

Если все поля заполнены, то скрипт начнет обрабатывать данные в своей внутренней части, если же хоть одно поле не было заполнено, то на экран пользователя выведется сообщение с требованием заполнить все поля формы echo "Для отправки сообщения заполните все поля! $back" и ссылкой для возврата на предыдущую страницу, которую мы создали самой первой строкой.

Дале вставляем во внутреннюю часть обработчика формы:

$name = trim (strip_tags ($_POST [ "name" ] ) ) ; $phone = trim (strip_tags ($_POST [ "phone" ] ) ) ; $mail = trim (strip_tags ($_POST [ "mail" ] ) ) ; $message = trim (strip_tags ($_POST [ "message" ] ) ) ;

Таким образом мы очистили вводимые пользователем данные от html тегов и лишних пробелов. Это позволяет нам обезопасить себя от получения вредоносного кода в высылаемых нам сообщениях.

Проверки можно и усложнить, но это уже по вашему желанию. Минимальную защиту на серверной стороне мы уже поставили. Дальнейшее мы сделаем на стороне клиента используя JS.

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

После чистки тегов добавляем отправку сообщения:

mail ("почта_для_получения_сообщений@gmail.com" , "Письмо с адрес_вашего_сайта" , "Вам написал: " . $name . "
Его номер: " . $phone . "
Его почта: " . $mail . "
Его сообщение: " . $message , "Content-type:text/html;charset=windows-1251" ) ;

Именно эта строка и занимается формированием и отправкой сообщения к нам. Заполняется она следующим образом:

1. "почта_для_получения_сообщений@gmail.com" – сюда между кавычек вставляете свою почту
2. "Письмо с адрес_вашего_сайта" – это тема сообщения, которое будет приходить на почту. Можно написать сюда что угодно.
3. "Вам написал: ".$name." < br /> Его номер: ".$phone." < br /> Его почта: ".$mail." < br /> Его сообщение: ".$message – формируем сам текст сообщения. $name – вставляем информацию заполненную пользователем через обращение к полям из предыдущего шага, в кавычках описываем что значит это поле, тегом < br /> делаем перенос строки, чтобы сообщение в целом было читабельно.
4. Content-type:text/html;charset=windows-1251 - в конце идет явное указание типа данных передаваемого в сообщении и его кодировки.

ВАЖНО!

Кодировка указанная в «голове» документа ( < meta http- equiv= "Content-Type" content= "text/html; charset=windows-1251" /> ), кодировка из сообщения Content-type:text/html;charset=windows-1251 и в целом кодировка файла PHP должны совпадать иначе в получаемых на почту сообщениях вместо русских или английских букв будут выводиться «кракозябры».

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

Проверка формы на адекватность вводимых данных

Чтобы пользователи по невнимательности не промахивались полями и заполняли все корректно стоит поставить проверку вводимых данных.

Это можно сделать как на PHP на стороне сервера, так и на JS на стороне клиента. Я использую второй вариант, поскольку так человек сразу может узнать что он сделал не верно и исправить ошибку не делая дополнительных переходов по страницам.

Код скрипта вставляем в том же файле, где у нас располагается HTML часть формы. Для нашего случая он будет выглядеть так:

< script> function checkForm(form) { var name = form. name. value; var n = name. match(/ ^[ A- Za- zА- Яа- я ] * [ A- Za- zА- Яа- я ] + $/ ) ; if (! n) { alert("Имя введено неверно, пожалуйста исправьте ошибку" ) ; return false ; } var phone = form. phone. value; var p = phone. match(/ ^[ 0 - 9 + ] [ 0 - 9 - ] * [ 0 - 9 - ] + $/ ) ; if (! p) { alert("Телефон введен неверно" ) ; return false ; } var mail = form. mail . value; var m = mail . match(/ ^[ A- Za- z0- 9 ] [ A- Za- z0- 9 \. _- ] * [ A- Za- z0- 9 _] *@ ([ A- Za- z0- 9 ] + ([ A- Za- z0- 9 - ] * [ A- Za- z0- 9 ] + ) * \. ) + [ A- Za- z] + $/ ) ; if (! m) { alert("E-mail введен неверно, пожалуйста исправьте ошибку" ) ; return false ; } return true ; }

Ну а теперь обычный разбор:

Для того, чтобы при нажатии на кнопку отправки формы, у нас происходила ее проверка вешаем запуск нашего скрипта на тег form:

< form method= "post" action= "mail.php" onSubmit= "return checkForm(this)" >

Теперь по пунктам забираем состав проверки:

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

Чтобы организовать передачу данных на сервер с помощью формы, потребуется реализовать 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 "Поле не заполнено" ;
}

«PHP Form — работа с формами в PHP» – восьмой урок учебника PHP. В этом уроке мы поговорим про обработку форм средствами PHP.

Работа с формами

PHP позволяет обрабатывать данные, которые пользователь ввел в поля формы. После активации кнопки submit данные отправляются на страницу – обработчик, указанную в поле action элемента

Submit – Кнопка для отправки данных формы на сервер.

1.1. Кнопка (input type=button)

1.2. Кнопка с изображением (input type=image)

Кнопка с рисунком

Кнопки с изображениями аналогичны по действию кнопке Submit , но представляют собой рисунок. Для этого задаем type=image и src="image.gif" .

Когда пользователь щелкнет где-нибудь на изображении, соответствующая форма будет передана на сервер с двумя дополнительными переменными – sub_x и sub_y . Они содержат координаты нажатия пользователя на изображение. Опытные программисты могут заметить, что на самом деле имена переменных, отправленных браузером, содержат точку, а не подчеркивание, но PHP автоматически конвертирует точку в подчеркивание.

1.3. Кнопка отправки формы (input type=submit)

Служит для отправки формы сценарию. При создании кнопки для отправки формы необходимо указать 2 атрибута: type="submit" и value="Текст кнопки" . Атрибут name необходим, если кнопка не одна, а несколько и все они созданы для разных операций, например кнопки "Сохранить", "Удалить", "Редактировать" и т.д. После нажатия на кнопку сценарию передается строка имя=текст кнопки.

РНР -сценарий не требуется.

1.4. Массив кнопок (submit) для выбора варианта действий

2. Кнопка сброса формы (Reset)

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

РНР -сценарий не требуется.

3. Флажок (checkbox)

Флажки checkbox предлагают пользователю ряд вариантов, и разрешает произвольный выбор (ни одного, одного или нескольких из них).

4. Переключатель(radio)

Переключатели radio предлагают пользователю ряд вариантов, но разрешает выбрать только один из них.
Пример 1.

5. Текстовое поле (text)

При создании обычного текстового поля размером size и максимальной допустимой длины maxlength символов, атрибут type принимает значение text . Если указан параметр value , то поле будет отображать указанный в переменной value. При создании поля не забывайте указывать имя поля, т.к. этот атрибут является обязательным.

6. Поле для ввода пароля (password)

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

7. Скрытое текстовое поле (hidden)

Позволяет передавать сценарию какую то служебную информацию, не отображая её на странице.

8. Выпадающий список (select)

Тэг представляет собой выпадающий или раскрытый список, при этом одновременно могут быть выбраны одна или несколько строк. Но будет передано значение последней выбранной кнопке.
Список начинается с парных тегов . Теги позволяют определить содержимое списка, а параметр value определяет значение строки. Если в теге указан параметр selected , то строка будет изначально выбранной. Параметр size задает, сколько строк будет занимать список. Если size равен 1 , то список будет выпадающим. Если указан атрибут multiple , то разрешено выбирать несколько элементов из списка. Но эта схема практически не используется, а при size = 1 не имеет смысла.