PHP _SELF в атрибуте формы action. Обработка формы в PHP
Львиная доля задач в PHP связана с обработкой данных, полученных от пользователя. И в большинстве случаев, эти данные получены из формы, поэтому обработка форм в PHP является важнейшим моментом при создании сайта , о котором я и расскажу в этой статье.
Для начала давайте создадим форму на HTML :
Это пример классической формы авторизации пользователя , которую, уверен, многие из Вас многократно заполняли на самых разных сайтах. Давайте теперь обсудим один важный момент: как отправляются данные? Существует два метода (мы с Вами будем только два рассматривать) - это GET и POST . Главное их отличие - это вид отправки: открытый (GET ) и закрытый (POST ). Самый лучший способ понять, в чём разница - это открыть данный HTML-код в браузере и нажать кнопку "Войти ". Посмотрите на адресную строку, а потом поставьте другой метод, снова пройдите и вновь посмотрите на адресную строку. Отличие будет бросаться в глаза мгновенно.
Соответственно, в PHP существуют два массива: $_GET и $_POST , которые содержат данные, полученные каждым из этих методов. Также есть массив $_REQUEST , который содержит данные $_GET и $_POST одновременно. Я Вам советую использовать метод POST и массив $_POST , хотя, безусловно, зависит от ситуации, но в большинстве случаев делают именно так.
Теперь давайте обработаем данные. Давайте реализуем простой скрипт (в файле "req.php "):
$login = $_POST["login"];
$pass = $_POST["pass"];
if (($login == "Admin") && ($pass == "AdminPass"))
echo "Привет, Admin!";
else echo "Доступ закрыт";
?>
В данном скрипте мы получаем данные, полученные из формы методом POST (из массива $_POST , хотя с таким же успехом могли получить эти данные из $_REQUEST ). Дальше проверяем логин и пароль и выводим: "Привет, Admin!" или "Доступ закрыт". Разумеется, чтобы создать систему авторизации пользователей на сайте, необходимо ещё узнать о cookie или о сессиях (в принципе, тоже cookie ), но о них мы поговорим несколько позднее, потому что у нас впереди ещё очень много важных тем.
В основном, для передачи параметров используются методы POST
и GET
.
Главное отличие методов POST
и GET
заключается в способе передачи информации. В методе GET
параметры передаются через адресную строку (URL
), т.е. в HTTP
-заголовке запроса, в то время как в методе POST
параметры передаются через тело HTTP
-запроса и никак не отражаются в адресной строке.
1. Кнопки – Тег
Тег создает на веб-странице кнопки и по своему действию напоминает результат, получаемый с помощью тега
(с параметром type="button | reset | submit"
). В отличие от этого тега, предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML
, в том числе изображения. Используя стили, можно определить вид кнопки путем изменения шрифта, цвета фона, размеров и других параметров.
Теоретически, тег должен располагаться внутри формы, устанавливаемой элементом . Тем не менее, браузеры не выводят сообщение об ошибке и корректно работают с тегом , если он встречается самостоятельно. Однако, если необходимо результат нажатия на кнопку отправить на сервер, помещать в контейнер обязательно. Закрывающий тег
обязателен.
Параметры:
disabled
– блокирует доступ и изменение элемента.
type
– тип кнопки
value
– Значение кнопки, которое будет отправлено на сервер или прочитано с помощью сприптов.
Параметр DISABLED
Блокирует доступ и изменение кнопки. Она в таком случае отображается серой и недоступной для активации пользователем. Кроме того, такая кнопка не может получить фокус путем нажатия на клавишу Tab
, мышью или другим способом. Тем не менее, такое состояние кнопки можно изменять через скрипты.
Определяет тип кнопки, который устанавливает ее поведение в форме. По внешнему виду кнопки разного типа никак не различаются, но у каждой такой кнопки свои функции. Значение по умолчанию: button .
Аргументы:
button – Обычная кнопка.
reset – Кнопка для очистки введенных данных формы и возвращения значений в первоначальное состояние.
Submit – Кнопка для отправки данных формы на сервер.
Параметр VALUE Определяет значение кнопки, которое будет отправлено на сервер. На сервер отправляется пара «имя=значение », где имя задается параметром name тега , а значение - параметром value . Значение может, как совпадать с текстом на кнопке, так быть и самостоятельным. Также параметр value применяется для доступа к данным через скрипты.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 предлагают пользователю ряд вариантов, и разрешает произвольный выбор (ни одного, одного или нескольких из них).
$go) { echo $index." - > ".$go."
"; }; };
4. Переключатель(radio)
Переключатели radio предлагают пользователю ряд вариантов, но разрешает выбрать только один из них.
Пример 1.
Пример 2.
\n"; ?>
5. Текстовое поле (text)
При создании обычного текстового поля размером size и максимальной допустимой длины maxlength
символов, атрибут type принимает значение text
. Если указан параметр value
, то поле будет отображать указанный в переменной value. При создании поля не забывайте указывать имя поля, т.к. этот атрибут является обязательным.
6. Поле для ввода пароля (password)
Полностью аналогичен текстовому полю, за исключением того, что символы, набираемые пользователем, не будут отображаться на экране.
7. Скрытое текстовое поле (hidden)
Позволяет передавать сценарию какую то служебную информацию, не отображая её на странице.
8. Выпадающий список (select)
Тэг представляет собой выпадающий или раскрытый список, при этом одновременно могут быть выбраны одна или несколько строк. Но будет передано значение последней выбранной кнопке.
Список начинается с парных тегов
. Теги
позволяют определить содержимое списка, а параметр value
определяет значение строки. Если в теге указан параметр selected
, то строка будет изначально выбранной. Параметр size задает, сколько строк будет занимать список. Если size
равен 1
, то список будет выпадающим. Если указан атрибут multiple
, то разрешено выбирать несколько элементов из списка. Но эта схема практически не используется, а при size = 1
не имеет смысла.
Если необходимо создать выпадающий с предсказуемой последовательностью. Например, список с годами с 2000 по 2050. То используется следующий прием.
9. Многострочное поле ввода текста (textarea)
Многострочное поле ввода текста позволяет отправлять не одну строку, а сразу несколько. При необходимости можно указать атрибут readonly
, который запрещает редактировать, удалять и изменять текст, т.е. текст будет предназначен только для чтения. Если необходимо чтобы текст был изначально отображен в многострочном поле ввода, то его необходимо поместить между тэгами
.
Существует параметр wrap
– задание переноса строк. Возможные значения:
off
– отключает перенос строк;
virtuals
– показывает переносы строк, но отправляет текст как он введен;
physical
– переносы строк оставляются в исходном виде.
По умолчанию тег создает пустое поле шириной в 20
символов и состоящее из 2
строк.
Для того, чтобы в многострочном текстовом поле соблюдалось html-форматирование (перенос строк по средством тега
или
), то используйте функцию nl2br()
:
10. Кнопка для загрузки файлов (browse)
Служит для реализации загрузки файлов на сервер. При создании текстового поля также необходимо указать тип поля type
как "file"
.
Способы общения браузера с сервером
Способов, предоставляемых протоколом HTTP
, немного. Это важная информация. Никаких других способов нет. На практике используются два:
GET
– это когда данные передаются в адресной строке, например, когда пользователь жмет ссылку.
POST
– когда он нажимает кнопку в форме.
Метод GET
Чтобы передать данные методом GET
не надо создавать на HTML
-странице форму (использовать формы для запросов методом GET
вам никто не запрещает) – достаточно ссылки на документ с добавлением строки запроса, которая может выглядеть как переменная=значение. Пары объединяются с помощью амперсанда &, а к URL
страницы строка присоединяется с помощью вопросительного знака «?
».
Но можно не использовать пары ключ=значение, если надо передать всего одну переменную – для этого надо после знака вопроса написать ЗНАЧЕНИЕ
(не имя) переменной.
Преимущество
передачи параметров таким способом заключается в том, что клиенты, которые не могут использовать метод POST
(например, поисковые машины), все же смогут, просто пройдя по ссылке, передать параметры скрипту и получить содержимое.
Недостаток
в том, что просто изменив параметры в адресной строке, пользователь может повернуть ход сценария непредсказуемым образом и это создает огромную дыру в безопасности, в сочетании с неопределенными переменными и register_globals on
или кто-нибудь может узнать значение важной переменной (например ID
-сеcсии), просто посмотрев на экран монитора.
:
- для доступа к общедоступным страницам с передачей параметров (повышение функциональности)
- передача информации, не влияющей на уровень безопасности
:
- для доступа к защищенным страницам с передачей параметров
- для передачи информации, влияющей на уровень безопасности
- для передачи информации, не подлежащей модифицированию пользователем (некоторые передают текст SQL
-запросов.
Метод POST
Передать данные методом POST
можно только с помощью формы на HTML
странице. Основное отличие POST
от GET
в том, что данные передаются не в заголовке запроса а в теле, следовательно, пользователь их не видит. Модифицировать можно только изменив саму форму.
Преимущество
:
- большая безопасность и функциональность запросов с помощью форм методом POST
.
Недостаток
:
- меньшая доступность.
Для чего следует использовать
:
- для передачи большого объема информации (текст, файлы..);
- для передачи любой важной информации;
- для ограничения доступа (например, использовать для навигации только форму – возможность, доступная не всем программам-роботам или грабберам-контента).
Для чего не следует использовать
:
PHP
способен принимать файл, загружаемый при помощи любого браузера,. Это дает возможность загружать как текстовые, так и бинарные файлы. Вместе с PHP
-аутентификацией и функциями для работы с файловой системой, вы получаете полный контроль над тем, кому разрешено загружать файлы, и над тем, что делать с файлом после его загрузки.
Страница для загрузки файлов может быть реализована при помощи специальной формы, которая выглядит примерно так:
//Форма для загрузки файлов
В приведенном выше примере "URL
"
необходимо заменить ссылкой на PHP
-скрипт. Скрытое поле MAX
_FILE_SIZE
(значение необходимо указывать в байтах) должно предшествовать полю для выбора файла, и его значение является максимально допустимым размером принимаемого файла. Также следует убедиться, что в атрибутах формы вы указали enctype="multipart/form-data"
, в противном случае загрузка файлов на сервер выполняться не будет.
Внимание
Опция MAX
_FILE_SIZE
является рекомендацией браузеру, даже если бы PHP
также проверял это условие. Обойти это ограничение на стороне браузера достаточно просто, следовательно, вы не должны полагаться на то, что все файлы большего размера будут блокированы при помощи этой возможности. Тем не менее, ограничение PHP
касательно максимального размера обойти невозможно. Вы в любом случае должны добавлять переменную формы MAX
_FILE_SIZE
, так как она предотвращает тревожное ожидание пользователей при передаче огромных файлов, только для того, чтобы узнать, что файл слишком большой и передача фактически не состоялась.
Как определить метод запроса?
Напрямую:
Getenv("REQUEST_METHOD");
вернет GET или POST .
Какой способ следует применять?
Если форма служит для запроса некой информации, например – при поиске, то ее следует отправлять методом GET
. Чтобы можно было обновлять страницу, можно было поставить закладку и/или послать ссылку другу.
Если же в результате отправки формы данные записываются или изменяются на сервере, то следует их отправлять методом POST
, причем обязательно, после обработки формы, надо перенаправить браузер методом GET
. Так же, POST
может понадобиться, если на сервер надо передать большой объём данных (у GET
он сильно ограничен), а так же, если не следует "светить" передаваемые данные в адресной строке (при вводе логина и пароля, например).
В любом случае, после обработки POST
надо всегда перенаправить браузер на какую-нибудь страницу, пусть ту же самую, но уже без данных формы, чтобы при обновлении страницы они не записывались повторно.
Как передать данные в другой файл непосредственно из тела PHP -программы методом GET и POST ?
Пример, для демонстрации отправки данных методом POST и GET одновременно и получения ответа от сервера.
$url = "http://test.ru/patch/file.php?var=23&var2=54"; $parse_url = parse_url($url); $path = $parse_url["path"]; // путь до файла (/patch/file.php) if($parse_url["query"]) // если есть список параметров $path .= "?" . $parse_url["query"]; // добавляем (?var=23&var2=54) $host= $parse_url["host"]; // тут получаем хост (test.ru) $data = "var3=test&var4=".urlencode("еще тест"); $fp = fsockopen($host, 80, $errno, $errstr, 10); if ($fp) { $out = "POST ".$path." HTTP/1.1\n"; $out .= "Host: ".$host."\n"; $out .= "Referer: ".$url."/\n"; $out .= "User-Agent: Opera\n"; $out .= "Content-Type: application/x-www-form-urlencoded\n"; $out .= "Content-Length: ".strlen($data)."\n\n"; $out .= $data."\n\n"; fputs($fp, $out); // отправляем данные while($gets=fgets($fp,2048)) // читаем данные построчно и выводим их. { print $gets; } fclose($fp); } ?>
Одной из наиболее часто встречающихся на практике задач является реализация формы обратной связи. Тобишь написание ее HTML кода, оформление ее на CSS, создание PHP скрипта, который бы обрабатывал полученные от пользователя данные и отправлял их на нашу почту, написание JS скрипта, который бы проверял форму на адекватность вводимых данных, защита нашего детища от спама, чтобы наш почтовый ящик не обвалился от атак ботов.
Все вышеперечисленные моменты будут рассмотрены в нашем обзоре и подробно прокомментированы.
Итак, начинаем создание формы обратной связи:
HTML
В первую очередь мы пишем HTML код, в нем задаются поля, которые будет заполнять пользователь. Они же в дальнейшем будут оформляться. Код формы выглядит следующим образом:
< form method= "post" action= "mail.php" > < div class = "left" > < label for = "name" > Имя: label> < input maxlength= "30" type= "text" name= "name" /> < label for = "phone" > Телефон: label> < input maxlength= "30" type= "text" name= "phone" /> < label for = "mail" > E- mail : label> < input maxlength= "30" type= "text" name= "mail" /> div> < div class = "right" > < label for = "message" > Сообщение: label> < textarea rows= "7" cols= "50" name= "message" > textarea> < input type= "submit" value= "Отправить" /> div> form>
И визуально она выглядит сейчас следующим образом:
Согласен, пока все некрасиво и ничего не понятно, но мы только начали.
Рассмотрим приведенный выше код подробно:
< form method= "post" action= "mail.php" > … form>
для того, чтобы создать форму необходимо использовать тег form. Именно он определяет начало и конец формы для интерпретатора кода. У него, как и у любого тега, есть целый набор атрибутов, но обязательных для работы формы всего два, это method (метод отправки запроса на сервер, для форм стандартно используют post) и action (указывает путь к файлу-обработчику формы, именно в этом файле будет содержаться скрипт на PHP, который после будет отправлять введенные пользователем значения нам на почту, в нашем случае мы видим, что это файл называется mail.php и лежит он в том же директории сайта, что и рассматриваемая нами страница).< input maxlength= "30" type= "text" name= "name" />
Далее у нас следуют инпуты. Это собственно сами поля формы в которые пользователи будут вводить необходимую нам информацию (type="text" говорит о том, что это будет текст). Атрибут maxlength указывает сколько символов может ввести пользователь в данное поле формы. Самый важный атрибут это name – он задает имя конкретного поля. Именно по этим именам в дальнейшем PHP скрипт будет обрабатывать поступающую в него информацию. При желании можно еще задать атрибут placeholder, который выводит внутри поля текст исчезающий при установке курсора внутри нее. Одной из проблем плейсхолдера является то, что он не поддерживается некоторыми старыми браузерами.< label for = "name" > Имя: label>
Используется в случае если мы отказались от плейсхолдеров. Обычная подпись поля, атрибут for сообщает к какому конкретно полю относится данная подпись. Значением указывается name интересующего нас поля.< textarea rows= "7" cols= "50" name= "message" > textarea>
Также как и инпут предназначен для введения пользователем информации, только на этот раз поле заточено для длинных сообщений. Rows указывает размер поля в строках, cols в символах. В целом они задают высоту и ширину нашего поля.< input type= "submit" value= "Отправить" />
О том, что это кнопка для отправки формы нам сообщает type="submit", а value задает текст, который будет внутри этой кнопки.< div class = "right" > div>
использованы только для дальнейшего визуального оформления формы.
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 я не вижу смысла, обращу Ваше внимание лишь на ключевые моменты:
- Не стоит писать оформление под каждый тег в форме. Старайтесь строить свои селекторы так, чтобы парой строк кода оформлять все необходимые Вам элементы.
- Не используйте для переноса строк и создания отступов лишние теги по типу < br>, < p> и тд, с этими задачами прекрасно справляется CSS со свойством display: block и margin с padding. Больше о том, почему не стоит пользоваться < br> в верстке вообще можете почитать в статье Тэг br, а так ли он нужен? .
- Не стоит пользоваться табличной версткой для форм. Это противоречит семантике этого тега, а поисковики любят семантичный код. Для того, чтобы формировать визуальную структуру документа нам достаточно тегов div, и заданных им в CSS свойств display: inline-block (выстраивает блоки в ряд) и vertical-align: top (не дает им разбежаться по экрану), задаем им необходимую высоту и вуаля, ничего лишнего и все расположено так, как нам нужно.
Для желающих экономить свое время на оформлении сайтов могу посоветовать пользоваться CSS фреймворками при создании сайтов, особенно самописных. Мой выбор в этом плане- Twitter Bootstrap . Урок по оформлению форм с его использованием можно посмотреть .
PHP
Ну вот и пришло время сделать нашу форму работоспособной.
Заходим в наш корневой каталог сайта и создаем там файл mail.php, к которому мы ранее указывали путь в атрибуте action тега form.
В конечном итоге его код будет выглядеть следующим образом:
Его номер: " . $phone . "
Его почта: " . $mail . "
Его сообщение: " . $message , ) ; echo "Ваше сообщение успешно отправлено!
Вы получите ответ в ближайшее время
$back " ; exit ; } else { echo ; exit ; } ?>
Обсуждение 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"
)
;
Именно эта строка и занимается формированием и отправкой сообщения к нам. Заполняется она следующим образом:
- "почта_для_получения_сообщений@gmail.com" – сюда между кавычек вставляете свою почту
- "Письмо с адрес_вашего_сайта" – это тема сообщения, которое будет приходить на почту. Можно написать сюда что угодно.
- "Вам написал: ".$name." < br /> Его номер: ".$phone." < br /> Его почта: ".$mail." < br /> Его сообщение: ".$message – формируем сам текст сообщения. $name – вставляем информацию заполненную пользователем через обращение к полям из предыдущего шага, в кавычках описываем что значит это поле, тегом < br /> делаем перенос строки, чтобы сообщение в целом было читабельно.
- 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)" >
Теперь по пунктам забираем состав проверки:
Как можете заметить такая мини проверка пишется для каждого нашего поля. Проверку на одно поле я выделил на скриншоте красным квадратом, у других полей она имеет аналогичную структуру и если возникнет необходимость добавить поле или убрать его, Вы теперь с легкостью сможете это сделать.
У Вас в браузере заблокирован JavaScript. Разрешите JavaScript для работы сайта!
Работа с формами
Для передачи данных от пользователя Web-страницы на сервер используются HTML-формы. Для работы с формами в PHP предусмотрен ряд специальных средств.
Предварительно определенные переменные
В PHP существует ряд предварительно определенных переменных, которые не меняются при выполнении всех приложений в конкретной среде. Их также называют переменными окружения или переменными среды. Они отражают установки среды Web-сервера Apache, а также информацию о запросе данного браузера. Есть возможность получить значения URL, строки запроса и других элементов HTTP-запроса.
Все предварительно определенные переменные содержатся в ассоциативном массиве $GLOBALS . Кроме переменных окружения этот массив содержит также глобальные переменные, определенные в программе.
Пример 1
"; ?>
В результате на экране появится список всех глобальных переменных, включая переменные окружения. Наиболее часто используемые из них:
Переменная | Описание | Cодержание |
---|---|---|
$_SERVER["HTTP_USER_AGENT"] | Название и версия клиента | Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html) |
$_SERVER["REMOTE_ADDR"] | IP-адрес | 144.76.94.14 |
getenv("HTTP_X_FORWARDED_FOR") | Внутренний IP-адрес клиента | |
$_SERVER["REQUEST_METHOD"] | Метод запроса (GET или POST ) | GET |
$_SERVER["QUERY_STRING"] | При запросе GET закодированные данные, передаваемые вместе с URL | |
$_SERVER["REQUEST_URL"] | Полный адрес клиента, включая строку запроса | |
$_SERVER["HTTP_REFERER"] | Адрес страницы, с которой был сделан запрос | |
$_SERVER["PHP_SELF"] | Путь к выполняемой программе | /index.php |
$_SERVER["SERVER_NAME"] | Домен | сайт |
$_SERVER["REQUEST_URI"] | Путь | /php/php_form.php |
Обработка ввода пользователя
PHP-программу обработки ввода можно отделить от HTML-текста, содержащего формы ввода, а можно расположить на одной странице.
Пример 2
Здесь отсутствует кнопка передачи данных, т.к. форма, состоящая из одного
поля, передается автоматически при нажатии клавиши
При обработки элемента с многозначным выбором для доступа ко всем выбранным значениям нужно к имени элемента добавить пару квадратных скобок. Для выбора нескольких эллементов следует удерживать клавишу Ctrl.
Пример 3.1
РЕЗУЛЬТАТ ПРИМЕРА 3.1:
Пример 3.2
- ";
foreach ($Item as $value) echo "
- $value"; echo "
Пример 4. Прием значений от checkbox-флажков
$v) { if($v) echo "Вы знаете язык программирования $k!"; else echo "Вы не знаете языка программирования $k.
"; } } ?>
РЕЗУЛЬТАТ ПРИМЕРА 4:
Пример 5
"; ?>Можно обрабатывать формы, не заботясь о фактических именах полей.
Для этого можно использовать (в зависимости от метода передачи) ассоциативный массив $HTTP_GET_VARS или $HTTP_POST_VARS . Эти массивы содержат пары имя/значение для каждого элемента переданной формы. Если Вам все равно, Вы можете использовать ассоциативный массив $_REQUEST .
Пример 6
"; ?>
Пример 7. Обработка нажатия на кнопку с использованием оператора "@".
С помощью функции header() , послав браузеру заголовок "Location" , можно перенаправить пользователя на новую страницу.
Например:
header("Location: ex2.php"); ?>
Передача файла на сервер. Залить файл. UpLoad
PHP позволяет передавать на сервер файлы. HTML-форма, предназначенная для передачи файла, должна содержать аргумент enctype="multipart/form-data" .
Кроме того в форме перед полем для копирования файла должно находиться скрытое поле с именем max_file_size . В это скрытое поле должен быть записан максимальный размер передаваемого файла (обычно не больше 2 Мбайт).
Само поле для передачи файла - обычный элемент INPUT с аргументом type="file" .
Например:
После того, как файл передан на сервер, он получает уникальное имя и сохраняется в каталоге для временных файлов. Полный путь к файлу записывается в глобальную переменную, имя которой совпадает с именем поля для передачи этого файла. Кроме этого PHP сохраняет еще некоторую дополнительную информацию о переданном файле в других глобальных переменных:
Пример 8
"; echo "размер: ".$_FILES["userfile"]["size"]."
"; echo "тип: ".$_FILES["userfile"]["type"]."
"; } ?>
Примеры загрузки файлов на сервер
Если возникнут проблеммы с перекодировкой сервером загруженного файла, символ с кодом 0х00 заменен на пробел (символ с кодом 0х20 ), допишите в файл httpd.conf из каталога Апача (/usr/local/apache) следующие строки.
Сегодня будем работать над созданием красивой HTML формы обратной связи для сайта, работающей на PHP и имеющею встроенную защиту от спама. Никаких особых знаний вам не потребуется, достаточно будет основ html и элементарной логики. Я дам готовые файлы, которые вы сможете вставить на сайт без изменений или скорректировать под свои нужды.
Недавно я делал статью о том, как сделать с помощью плагина Contact Form 7. Также просто можно сделать форму обратной связи на Joomla и других популярных CMS.
Но, что делать сайтам, которые не используют популярные CMS? – Остается делать все руками.
Кроме того, использование обратной связи без плагинов возможно и для WordPress. Лишние плагины создают немалую нагрузку на сервера и отказ от них позволяет ускорить работу сайта.
Заказать установку и настройку готовой формы за 500 рублей можно здесь (это для тех кому лень руками поработать или навыка недостаточно).
Принцип работы формы обратной связи на html
Наша форма будет иметь 5 полей для ввода данных – имя, электронный адрес, телефон, адрес сайта, текст сообщения (вы сможете удалить или изменить их самостоятельно).
Все поля, кроме адреса веб сайта будут обязательны для заполнения (это вы тоже сможете настроить самостоятельно).
Для полей с email адресом и сайтом будет проводиться обязательная проверка правильности ввода данных.
Конечная форма связи будет иметь вот такой вид:
Для работы контактной формы, созданной на html, требуется 3 элемента.
Первый отвечает за структуру самой формы, за тип и количество полей ввода данных. Это обычный html код.
Второй отвечает за обработку данных, которые пользователь вводит в поля формы. Он определяет, что, куда и в каком виде пересылать, после того, как будет нажата кнопка отправки сообщения. Для реализации используется специальный PHP скрипт.
Третий отвечает за внешний вид. Устанавливает размеры и расположение полей ввода данных, добавляет различные цвета и эффекты. Это все задается CSS стилями.
Демо версия формы
Настройку каждого из этих элементов мы с вами разберем по шагам.
Создание HTML макета
Чтобы не делать статью слишком длинной и не добавлять отдельно каждый элемент, я приведу полный html код, а ниже опишу каждый блок и возможные изменения.
Для обозначения форм в html используется тег
, внутри которого заполняются необходимые параметры.Начнем с первой строки.
class=”contact_form” – указываем класс, для того, чтобы в будущем задать CSS стили.
action=”contact-form.php” – указываем название файла со скриптом, который будет обрабатывать данные формы и осуществлять отправку сообщения. Если файл лежит в той же папке, что и страница с формой, то достаточно указать только название файла, если в другой, то нужно будет указать и путь к файлу.
Дальше идут 4 блока
Отвечающих за вывод полей для ввода данных, по названиям понятно, какой за что отвечает. Сами поля выводятся с помощью тегов , внутри которого задаются следующие характеристики:
Type – отвечает за тип вводимых данных, text – обычный текст, email – электронный адрес, такие поля автоматически проверяются на правильность (должна присутствовать @), tel – телефон, url – адрес сайта.
Name – собственное название самого элемента, оно необходимо, что скрипт знал как использовать данные каждого поля. Если вы сделаете несколько полей одного типа, то вам необходимо каждому полю присвоить свое name.
Placeholder – это подсказка, находящаяся внутри поля, текст, замещающий пустое поле элемента. Ее можно изменить или удалить, на работу формы она не влияет.
Required – этот параметр указывает на то, что поле обязательно для заполнения. Вы можете самостоятельно решить, какие элементы обязательны, а какие нет.
pattern=”(http|https)://.+” – эта конструкция служит для проверки корректности поля веб сайт, указывает на то, что адрес обязательно должен содержать http://текст или https://текст , в противном случае будет ошибка.
Для некоторых полей задана всплывающая подсказка, которая появляется при выборе элемента. Ее задет , где form_hint является классом элемента (его свойства прописываются в CSS). Текст во всплывающей подсказке для каждого поля контактной формы можно задать любой. Если такая фишка вам не нужна – просто удалите весь тег .
Поля для ввода самого сообщения размечается тегом
Защита от спама – невидимое поле с именем name=bezspama. У него стоит стиль display:none – это значит поле невидимо людям, но боты его будут заполнять на автомате.
И завершающий элемент любой формы – кнопка отправки сообщения, она задается тегом , имеющим свой класс для настройки внешнего вида и тип “submit”.
Для добавления или удаления полей, достаточно убрать ненужные или вставить новые по аналогии с существующими, прописав для них все свойства и имена.
Оформление CSS стилями
Если вы посмотрите в браузере на то, что получилось, то увидите нечто корявое и непривлекательное. Для того, чтобы у нас получилась красивая форма обратной связи, придется поработать над ее стилями (html будет недостаточно).
Если вы владеете CSS, то задать оформление для всех элементов формы сможете без проблем, тут даже не потребуется моя помощь.
Если же вы не знакомы со стилями, то я просто дам вам готовый файл, в котором уже все прописано таким образом, что ваша форма будет идентична той, что в примере.
Подключить стили можно двумя способами:
- Скопировать содержимое файла в файл style.css, который уже есть на вашем сайте (добавьте в самый конец)
- Поместить файл, который я дал, на ваш хостинг и подключить его.
Подключаются файлы стилей следующим кодом , размещаемым внутри
. Если файл со стилями (styles.css) находится не в одной папке с html страницей, то пропишите полный путь до него.В файле со стилями, который я дал, каждый элемент подписан, поэтому, вы можете вносить в него любые изменения – менять цвета, размеры, форму, эффекты. Владея самыми базовыми знаниями, вы сможете легко его править.
Настройка PHP кода (добавлена защита от спама)
Как и в случае со стилями, я дам вам готовый код, обрабатывающий HTML форму обратной связи и защищающий от спама. Этот файл адаптирован для конкретной конфигурации и, если вы захотите задать новые поля или удалить существующие, в него придется вносить изменения. Поэтому, я расскажу вам, как он работает, чтобы вы поняли, что нужно менять.
Для сайтов, использующих кодировку windows-1251 и версию php 5.4+, в код нужно будет внести дополнение, связанное с функцией htmlspecialchars. Покажу его ниже. Иначе, вместо кириллицы будут приходить пустые поля.
Помните, в свойствах формы (в html файле) мы указывали параметр action=”contact-form.php”. Вам нужно создать файл с названием contact-form.php и поместить в него находящийся ниже код.
\r\n Reply-To: $email \r\n"; if (mail($address, $sub, $mes, $from)) { header("Refresh: 5; URL=https://сайт"); echo "
";} else { header("Refresh: 5; URL=https://сайт"); echo " ";} } exit; /* Выход без сообщения, если поле bezspama заполнено спам ботами */ ?>/* Задаем переменные */ $name = htmlspecialchars ($_POST [ "name" ] ) ; $email = htmlspecialchars ($_POST [ "email" ] ) ; $tel = htmlspecialchars ($_POST [ "tel" ] ) ; $website = htmlspecialchars ($_POST [ "website" ] ) ; $message = htmlspecialchars ($_POST [ "message" ] ) ; $bezspama = htmlspecialchars ($_POST [ "bezspama" ] ) ; /* Ваш адрес и тема сообщения */ $sub = "Сообщение с сайта ХХХ" ; /* Формат письма */ $mes = "Сообщение с сайта ХХХ.\n Имя отправителя: $name Электронный адрес отправителя: $email Телефон отправителя: $tel Сайт отправителя: $website Текст сообщения: $message" ; if (empty ($bezspama ) ) /* Оценка поля bezspama - должно быть пустым*/ /* Отправляем сообщение, используя mail() функцию */ $from = "From: $name <$email> \r\n Reply-To: $email \r\n" ; if (mail ($address , $sub , $mes , $from ) ) { header () ; echo "
Письмо отправлено, через 5 секунд вы вернетесь на страницу XXX" ; } else { header ("Refresh: 5; URL=https://сайт" ) ; echo "
Письмо не отправлено, через 5 секунд вы вернетесь на страницу YYY" ; } exit ; /* Выход без сообщения, если поле bezspama заполнено спам ботами */ |
Первым делом нам необходимо задать переменные, которые будут обрабатываться php кодом. Для того, чтобы не запутаться, присваиваем им такие же имена, как были в самой форме, только начинаются все переменные со знака $. Сама команда присвоения значения имеет такой вид:
$название = htmlspecialchars($_POST["название"]);
$ название= htmlspecialchars ($ _POST [ "название" ] ) ; |
Если вы добавляли какие-то дополнительные поля данных, то в блоке переменных допишите их имена.
Не все переменные мы берем из формы. Как минимум, адрес электронной почты, на который придет письмо (ваш адрес) указывается отдельно. В данном случае это переменная $address – впишите в ее значение свой электронный ящик.
Также, в данном примере явным образом задано значение переменной $sub – она будет выдавать тему письма. Можно добавить тему сообщения в HTML форму в виде текстового поля (наподобие name), и брать значение этой переменной оттуда.
В блоке формат письма настраивается то сообщение, которое получите вы. Он может отличаться от того, что было написано в поле textarea под названием message. Я просто сделал еще одну переменную $mes и включил в нее дополнительный текст и важные данные отправителя (имя, почту, телефон, сайт). Эту часть вы можете сконфигурировать так, как вам удобно.
Чтобы получаемые вами письма подписывались именем отправителя, и в них включался их обратный адрес, а не адрес сервера, на котором находится ваш php файл, мы задаем новую переменную $from, в нее включаем имя и электронный ящик отправителя письма.
Затем функция mail осуществляет отправку письма по заданным параметрам. В случае успешной отправки появляется сообщение о том, что письмо отправлено, а через 5 секунд пользователя перебрасывает на страницу вашего сайта (адрес страницы и время задержки вы можете изменить). Если письмо отправить не удалось, появляется сообщение, что письмо не отправлено и через 5 секунд идет переход на страницу сайта, аналогичным образом вы можете задать адрес страницы и время.
Вставка формы на страницу сайта
Для того, чтобы вставить созданную вами форму обратной связи, вам нужно скопировать html код формы и вставить его в ту часть кода страницы, где вы хотите вывести обратную связь для сайта.
Еще раз хочу напомнить, если файл с PHP программой находятся не в той же папке, что и страница, на которой размещен html код, то в коде самой формы нужно прописать полный путь к нему, иначе, работать не будет, так как форма не найдет файл обработчик.
Скачать файлы контактной формы
Активный анти спам с вводом данных в поле
Спамеры действуют с помощью различных программных средств и некоторые боты умеют обходить защиту с пустым полем, которая встроена в базовую версию. Если они вас начинают донимать, то можно применить вместо или дополнительно простую защиту со вводом данных в специальное поле. Например, сделать математическое выражение с просьбой ввести ответ или задать какой-либо простой вопрос. Больших изменений в форме это не потребует.
Я покажу как изменить код формы и PHP обработчик для использования этого метода антиспама. При желании вы можете не менять защиту с пустым полем, а добавить соответствующие строки в код и у вас будет работать одновременно 2 метода – по идее, должно быть более эффективно.
Первым делом нам необходимо добавить поле для ввода и вопрос в HTML код. В качестве основы у нас уже есть строка 25 (input name = “bezspama” ). Это поле невидимо. Мы превращаем его в обычное. Для этого всю строку меняем на вот такой блок:
|
Вместо математического выражения 2+2*2 можете ввести любые данные – это визуальный вопрос для пользователя. Из поля input мы убрали стиль display:none и добавили обязательность заполнения.
Следующим шагом меняем данные в PHP обработчике, чтобы он делал проверку уже не на пустоту этого поля, а на правильность введенных данных. Проверка у нас делалась в строке 25 выражением empty ($bezspama ) . Мы меняем это выражение и будем делать проверку равенства заполненного поля заранее заданному числу. В моем примере, математическое выражение равно 6, поэтому вся строка будет выглядеть вот так.