В одной из прошлых тем уже рассматривалось получение данных из формы. В данной теме я подробнее расскажу, как правильно осуществляется отправка формы на сервер, а также обработка формы в PHP.
Поле для ввода. Самыми распространёнными элементами формы являются различные поля для ввода. Они создаются при помощи тэга многих типов и тэга
1 |
|
select. Из тэга
12 |
Интересы |
Радиокнопка. У всех радиокнопок из одной группы атрибут name должен иметь одинаковое значение. Это значение не только устанавливает имя параметра, но и объединяет радиокнопки в группу, из которой можно выбрать только одну радиокнопку. Атрибут value устанавливается разный. Добавим радиокнопки в форму:
Чекбокс. В отличие от радиокнопок, каждый чекбокс - это отдельный элемент формы. Все чекбоксы независимы друг от друга и каждый отправляет свои данные на сервер. Атрибут name у всех чекбоксов должен быть разный, а атрибут value может быть либо одинаковый, либо разный. Однако у чекбокса нет каких-то конкретных данных. Он может быть либо выбран либо нет. Поэтому устанавливать ему длинное значение нет смысла. Ему можно задать значение в один символ, например, 1. На сервере смысл этого значения будет такой: если значение есть, то чекбокс был выбран, а если никакого значения нет, значит он не выбран. Добавим чекбоксы в форму и создадим кнопку оправки формы:
В предложенном примере создана форма отправляющая данные скрипту с названием takeform.php. Поэтому нужно создать этот скрипт. Это будет не просто программа, а страница, которая будет формироваться в зависимости от данных, получаемых из формы. Форму отправляем методом POST. Скрипт берёт эти данные из суперглобального массива $_POST . Элементы массива можно просто использовать в скрипте, но если с ними нужно много работать, то писать каждый раз название элемента неудобно. Проще записать значение в переменную и обращаться к ней. Создадим файл takeform.php и запишем в переменные значения из первых двух элементов формы:
takeform.php:
В тег
13 |
if (!empty($self))
{
echo " О себе: "; echo "".$self." ";
}
|
select. Текст из полей для ввода обычно используется сам по себе. Он записывается в базу данных или выводится на страницу. Но данные из других элементов формы используются несколько по-другому. Получив данные из формы, скрипт не выводит их, а определяет на их основе, какие действия нужно выполнять. Сформируем часть страницы в зависимости от выбора пользователем пункта списка:
Обратите внимание, открывающий тэг
Идёт до обработки данных, в строке 19, а закрывающий - в конце, в строке 28. Таким образом, на части разделён не только HTML код, но и конкретный тэг. Это обычная практика.
Радиокнопка. У всех радиокнопок одной группы одинаковый атрибут value . Соотвотсвоенно, для всей группы создаётся один элемент массива $_POST . В него будет записано значение из той радиокнопки, которую выберет пользователь. Добавим на страницу результат выбора радиокнопки:
Чекбокс. Каждый чекбокс обрабатывается отдельно. Обычно чекбокс не содержит конкретных данных, поэтому просто проверяется содержит он значение или нет. Если значение есть, значит пользователь его выбрал и это учитывается при обработке данных формы. Добавим на страницу информацию о том, что выбрал пользователь:
Так данные из форм отправляются на сервер и обрабатывабтся в PHP скриптах. В зависимости от разных задач, работа с формами осуществляться иначе, но на основе приведённых примеров Вы сможете легко использовать данные из форм так, как Вам нужно.
Одной из наиболее часто встречающихся на практике задач является реализация формы обратной связи. Тобишь написание ее HTML кода, оформление ее на CSS, создание PHP скрипта, который бы обрабатывал полученные от пользователя данные и отправлял их на нашу почту, написание JS скрипта, который бы проверял форму на адекватность вводимых данных, защита нашего детища от спама, чтобы наш почтовый ящик не обвалился от атак ботов.
Все вышеперечисленные моменты будут рассмотрены в нашем обзоре и подробно прокомментированы.
Итак, начинаем создание формы обратной связи:
В первую очередь мы пишем 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>
< input maxlength= "30" type= "text" name= "name" />
< label for = "name" > Имя: label>
< textarea rows= "7" cols= "50" name= "message" > textarea>
< input type= "submit" value= "Отправить" />
< div class = "right" > div>
Для того, чтобы наша форма обратной связи выглядела презентабельно ее нужно оформить. Для получения следующего результата:
Мы использовали данный код:
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 я не вижу смысла, обращу Ваше внимание лишь на ключевые моменты:
Для желающих экономить свое время на оформлении сайтов могу посоветовать пользоваться CSS фреймворками при создании сайтов, особенно самописных. Мой выбор в этом плане- Twitter Bootstrap . Урок по оформлению форм с его использованием можно посмотреть .
Ну вот и пришло время сделать нашу форму работоспособной.
Заходим в наш корневой каталог сайта и создаем там файл mail.php, к которому мы ранее указывали путь в атрибуте action тега form.
В конечном итоге его код будет выглядеть следующим образом:
Обсуждение 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"
)
;
Именно эта строка и занимается формированием и отправкой сообщения к нам. Заполняется она следующим образом:
ВАЖНО!
Кодировка указанная в «голове» документа ( < 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)" >
Теперь по пунктам забираем состав проверки:
Как можете заметить такая мини проверка пишется для каждого нашего поля. Проверку на одно поле я выделил на скриншоте красным квадратом, у других полей она имеет аналогичную структуру и если возникнет необходимость добавить поле или убрать его, Вы теперь с легкостью сможете это сделать.
Зачастую на Web – сайтах можно встретить страницы с размещенными на них HTML - формами. Веб-формы – удобный способ получения информации от посетителей вашего сайта. Пример тому – гостевая книга , – которая обеспечивает обратную связь с посетителями и разработчиками сайта. Формы так же удобны и для разработчиков сайта при разработке CMS, которая позволяет поддерживать главное свойство сайта - актуальность. Данная статья посвящена основам создания HTML-форм, их обработке и способам передачи данных из экранных форм в PHP-сценарии.
Теги и задают начало и конец формы. Начинающий форму тег содержит два атрибута: action и method . Атрибут action содержит адрес URL сценария, который должен быть вызван для обработки сценария. Атрибут method указывает браузеру, какой вид HTTP запроса необходимо использовать для отправки формы; возможны значения POST и GET .
Главное отличие методов POST и GET заключается в способе передачи информации. В методе GET параметры передаются через адресную строку, т.е. по сути в HTTP-заголовке запроса, в то время как в методе POST параметры передаются через тело HTTP-запроса и никак не отражаются на виде адресной строки.
В данной html-форме присутствует элемент browse , который открывает диалоговое окно для выбора файла для загрузки на сервер. При нажатии на кнопку "Передать файл" , файл передается сценарию-обработчику.
Затем необходимо написать сценарий обработчик action.php . Перед написание обработчика необходимо определиться в какой каталог мы будет копировать файл:
if(isset($_FILES
[
"myfile"
]))
// Если файл существует
{
$catalog
=
"../image/"
;
// Наш каталог
if (is_dir
($catalog
))
// Если такой каталог есть
{
$myfile
=
$_FILES
[
"myfile"
][
"tmp_name"
];
// Времменый файл
$myfile_name
=
$_FILES
[
"myfile"
][
"name"
];
// Имя файла
if(!
copy
($myfile
,
$catalog
)) echo
"Ошибка при копировании
файла "
.
$myfile_name
// Если неудалось скопировать файл
}
else
mkdir
("../image/"
);
// Если такого каталога нет, то мы его создадим
}
?>
Если вы доверяете пользователям закачивать на ваш сервер любые файлы, нужно быть предельно осторожным. Злоумышленники могут внедрить «нехороший» код в картинку или файл и отправить на сервер. В таких случаях нужно жестоко контролировать загрузку файлов.
Данный пример демонстрирует создание каталога и копирование файла в этот каталог на сервер.
Также хотел бы продемонстрировать пример с элементом checkbox . Этот элемент немного отличается от других элементов тем, что если не один из элементов checkbox ’a не выбран, то суперглобальная переменная $_POST вернет пустое значение:
if (!empty($_POST
[
"mycolor"
])) echo
$_POST
[
"mycolor"
];
// Если выбран хоть 1 элемент
else echo
"Выберите
значение"
;
?>
Есть еще вопросы или что-то непонятно - добро пожаловать на наш | |
|
Львиная доля задач в 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 ), но о них мы поговорим несколько позднее, потому что у нас впереди ещё очень много важных тем.
В этом уроке PHP рассматриваются базовые понятия языка: обработка форм с отправкой запроса в веб-страницы, основные управляющие конструкции php при обработке форм, запись данных из формы PHP в файл, функция даты в PHP date().
1. Напомним, что все файлы php тестируются только при запущенном Денвере и только из адресной строки браузера. Запускать файлы php двойным щелчком нельзя!
2. Запустите Денвер.
В данном уроке PHP рассмотрим обработку формы на HTML-странице, создание переменных PHP для полей формы.
1. Создайте форму, как на рис. 3.1. Подразумевается, что при нажатии на кнопку Отправить заказ данные из формы будут переданы администратору, а клиент на экране увидит ответ Заказ обработан . Если Вы затрудняетесь в написании формы, тогда реализуйте код, приведенный ниже рисунка, и сохраните его в папке php_2 под именем forma_bob.html Напоминаем, что адрес обработчика формы записывается в атрибуте action тега form .
Рисунок 3.1
2. Для того, чтобы пользователь получил ответ после отправки данных, необходимо создать обработчик формы на языке php. Создайте код, приведенный ниже, и сохраните его в папке php_2 под именем zakaz.php
3. Проверьте работоспособность обработчика. Для этого запустите файл forma_bob.html через браузер, набрав в адресной строке браузера адрес http://localhost/php_2/forma_bob.html
4. В поля формы введите любые цифры и нажмите кнопку Отправить заказ . Результат на рис. 3.2.
Рисунок 3.2
Весь смысл использования формы заказа заключается в получении информации о заказе клиента, которую он ввел с клавиатуры. Внутри PHP-сценария к каждому из полей формы можно получить доступ как к переменной, имеющей то же имя, что и у поля формы. В языке PHP переменные легко распознать, так как они начинаются со знака доллара $ .
Вы можете получить доступ к содержимому поля tireqty следующими способами:
$tireqty //короткий стиль
$_POST[‘tireqty’] //средний стиль
$HTTP_POST_VARS[‘tireqty’] //длинный стиль
Мы будем использовать длинный стиль для ссылок на переменные формы, но для простоты использования строить короткие версии применения. Это удобный и безопасный способ манипулирования данными, который эффективно работает во всех системах, независимо от выбранных версий и настроек.
Копируя содержимое одной переменной в другую, мы применяем операцию присваивания, для обозначения которой в языке PHP используется знак равенства (= ). Приводимая ниже строка кода создает новую переменную с именем $tireqty и переносит содержимое $_POST[‘tireqty’] в эту новую переменную:
$tireqty=$_POST[‘tireqty’]
Так как этот сценарий не генерирует никаких выходных данных, нет никакой разницы, будет он помещен выше или ниже дескриптора . Обычно этот блок размещается в начале сценария.
5. В файле zakaz.php измените код следующим образом и проверьте работоспособность формы. Результат на рис. 3.3. Цифры могут отличаться в зависимости от того, какие данные Вы ввели.
Рисунок 3.3
В этом уроке PHP рассмотрим основные арифметические функции PHP для расчетов.
1. Файл forma_bob.html сохраните под именем forma_bob_2.html
2. Файл zakaz.php сохраните под именем zakaz_2.php
3. В файле forma_bob_2.html форму «Автозапчасти от Боба» измените так, чтобы она имела вид, как на рис. 3.4. Не забудьте изменить имя обработчика на zakaz_2.php . Если затрудняетесь, то можете реализовать код, приведенный ниже.
Рисунок 3.4
4. Создайте новую обработку для формы в файле zakaz_2.php , используя знания, полученные из предыдущих уроков. Обработка должна содержать следующие выходные данные и условия:
1. Стоимость каждого товара определяется константой. Константа на PHP задается функцией define. Пример define("POKRPRICE",10); Первый параметр функции - это имя константы, которое пишется прописными буквами, второй параметр - значение константы.
2. Логическая операция ИЛИ обозначается ||
3. Логическая операция И обозначается && .
4. Операции сравнения: больше > , меньше < , больше или равно >= , меньше или равно <=
5. Функция, которая считывает время с компьютера date("H:i, j F")
6. Функция, которая форматирует количество знаков после запятой number_format . Пример number_format($sumnalog,2) . Первый параметр - переменная, у которой форматируем знаки, второй параметр - количество знаков после запятой.
7. Если Вы затрудняетесь с созданием обработки формы, может воспользоваться кодом, приведенным ниже (рис. 3.8):
Рисунок 3.8
В нашем уроке PHP также рассматриваем запись данных из формы в текстовый файл и функцию даты date() при обработке формы.
1. В файле-обработчике формы «Автозапчасти об Боба» после последней закрывающей фигурной скобки добавьте код.
Рисунок 3.9
2. Проверьте работу программы. Текстовый файл orders.txt создается автоматически, просмотрите его содержимое.
После изучения данного урока PHP предлагается выполнить контрольное задание для закрепления полученных знаний.
Рисунок 3.10
1. Создать форму, как на рис. 3.10.
2. Создать обработку формы, которая будет выводить результаты заказа, как на рис. 3.11 (результаты будут отличаться в зависимости от введенных в форму данных.
3. Результаты заказа должны записываться в отдельный текстовый файл.
Список заказа должен отражать следующее:
Условия задачи: