Введение
Формы используют для отправки какой-либо информации на сервер, которую необходимо как-то обработать.
Места использования форм:
- Создание регистрации и авторизации
- Создание блока комментариев
- Создание обращения в техническую поддержку (тикеты)
Создаём форму на HTML
Код формы необходимо помещать в <body> HTML документа.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Формы</title>
</head>
<body>
Здесь должна быть ваша форма.
</body>
</html>
Я пропущу скелет документа дальше, чтобы было более понятно.
<form action="" method="post"> <p>Введите логин: <input type="text" name="login"></p> <p>Введите пароль: <input type="password" name="pass"></p> <p><input type="submit" value="Отправить" name="done"></p> </form>
В атрибут action нужно указать обработчик формы (PHP-скрипт). Если поле пусто, значит, обработку формы выполнил тот скрипт, в котором расположена сама форма. В атрибут method нужно указать метод отправки формы (post или get). У каждого свои плюсы и минусы. Вкратце: post отправляет данные так, что пользователь не может их увидеть, а get — так, что они видны в URL-строке браузера.
Наглядный пример get:
Наглядный пример post:
Немного по PHP:
При отправке формы методом POST данные записываются в суперглобальный массив $_POST.
При отправке формы методом GET данные записываются в суперглобальный массив $_GET.
К суперглобальным массивам $_POST и $_GET нужно обращаться обычным способом (как вы делаете это и с обычными ассоциативными массивами) $массив[‘ключ’].
В форме мы сделали 3 <input>. Первые два — поле ввода логина и пароля. Третий — кнопка отправки формы.
Тег <input> имеет атрибут type=””. Для каждого случая указывают свой тип ввода. Допустим, text устанавливают для текста, submit — для отправки формы по атрибуту (action), а password — для пароля (чтобы он отображался звёздочками *).
Кроме того, тег <input> имеет атрибут name=”” и атрибут value=””. Value — стандартное значение элемента, name — предназначено для того, чтобы обработчик формы мог его идентифицировать.
Комьюнити теперь в Телеграм
Подпишитесь и будьте в курсе последних IT-новостей
Подписаться
Создаём обработчика формы
Мы перешли к самому интересному моменту статьи. Если мы обрабатываем форму на другой странице (action=”example.php”), то после нажатия кнопки подтверждения вас перекинет на указанную страницу.
Если action пуст, то страница с формой перезагрузится.
В самом верху скелета документа (перед <!DOCTYPE html>) открываем теги PHP и обрабатываем форму:
<? // Если кнопка нажата, то выполняет тело условия if (isset($_POST['done'])) { echo 'кнопка обработчика была нажата!<br>'; // Если логин и пароль не пуст(есть значение), а также пароль не 123 if (!empty($_POST['login']) && $_POST['pass'] != 123 && !empty($_POST['pass'])) { echo "Всё хорошо, все поля пройдены. "; echo "Здесь должна быть ваша обработка формы. "; echo "Занесение в базу данных, отправка сообщения и т.п."; } // Если логин пуст, тогда выводит сообщение if ($_POST['login'] == '') { echo 'Логин пуст!<br>'; } // Если пароль популярный ||(или) пуст, тогда выводит сообщение if ($_POST['pass'] == '123' || empty($_POST['pass'])) { echo "Нельзя использовать популярные пароли. Придумайте свой!<br>"; } } ?>
Теперь если форма не прошла проверку, то все данные стираются, и нужно их вводить заново.
Давайте доработаем форму, чтобы исправить это, а также изменим место вывода ошибок.
В самом верху PHP-тега заводим 2 новые переменные, которые по стандарту пусты:
$error_login = "";
$error_pas = "";
В проверке на пароль:
$error_pas .= "Нельзя использовать популярные пароли. Придумайте свой!<br>";
В проверке на логин:
$error_login .= 'Логин пуст!<br>';
.= означает то, что мы берём прошлую строку (пусто) и прибавляем к этому наше сообщение.
В форме HTML:
Добавляем после тега <input> вставку PHP (в данном случае <?= ?>), так как мы только выводим переменную. Суть проста: если ошибки в логине нет, тогда $error_login пуст, а следственно, ничего не выводится, иначе выводим там ошибку.
<p>Введите логин: <input type="text" name="login"><?=$error_login?></p> <p>Введите пароль: <input type="password" name="pass"><?=$error_pas?></p>
Теперь доработаем форму, чтобы она сохраняла значения полей.
В самом начале добавляем 2 переменные:
$input_login =""; $input_pass = "";
В начало проверки на ‘нажата ли кнопка отправки’ добавляем:
$input_login = $_POST['login']; $input_pass = $_POST['pass'];
То есть мы заносим в переменные значения из суперглобального массива $_POST.
И немного изменяем нашу HTML-форму:
<form action="" method="post"> <p>Введите логин: <input type="text" name="login" value="<?=$input_login?>"><?=$error_login?></p> <p>Введите пароль: <input type="password" name="pass" value="<?=$input_pass?>"><?=$error_pas?></p> <p><input type="submit" value="Отправить" name="done"></p> </form>
Добавляем тег value, чтобы указать стандартное значение поля. Теперь если выдаётся ошибка, то значения полей сохраняются, и пользователю нужно не заново их вводить, а только исправить ошибку.
Заключение
Как видите, создать хорошую форму на PHP не так уж и сложно. Проверки, которые я показал в этой статье, не обязательно должны быть. Вы можете придумывать свои (любые) проверки на поля ввода, используя PHP. Надеюсь, что вам понравилась моя статья, и вы выучили что-то новое.
Всем спасибо за внимание!
Итоговый код страницы с формой + обработчика:
https://pastebin.com/N9WegitB
Ученик
(163),
на голосовании
11 лет назад
Дополнен 11 лет назад
<form>
<input>
<input>
<input>
<input>
<input>
<input>
</form>
Где найти php файл-обработчик формы
Дополнен 11 лет назад
короче если action=”index.php” method=”get” , то где искать php обработчик формы
Дополнен 11 лет назад
в той же директории нет никакого index.php. Стоит цмс джумла.
Дополнен 11 лет назад
я знаю, что в action пишется путь к обработчику, но как на джумле всё это работает
Голосование за лучший ответ
NoNsYs
Мастер
(1964)
11 лет назад
если ссылка вида http: // site. ru / form.html (HTML, PHP без разницы)
и когда указано в action = “index.php” то
обработчик находится здесь http: // site. ru / index.php
Форма обратной связи — древнейшее программистское искусство. Тут есть всё: форма с проверкой, приём запроса, обработка, безопасность, хранение и ответ. Это как Hello World, только для самых крутых.
В сегодняшней версии программы — только самые основы этого упражнения. В следующих частях мы прокачаем систему.
Смысл программы в том, что посетитель страницы заполняет нужные поля, пишет текст сообщения и нажимает кнопку «Отправить». На почту владельцу сайта приходит письмо с текстом сообщения и данными о том, кто это сообщение отправил.
Чтобы сделать у себя на сайте такое, нам понадобится:
- сервер, который умеет работать с PHP-скриптами,
- страница, где разместим форму,
- скрипт на PHP — он будет отвечать за отправку сообщения.
Сервер для PHP
Для того, чтобы PHP-код исполнялся, нужен какой-то компьютер-исполнитель. Мы называем его сервером — то есть «раздающим». На сервере должна работать программа для PHP, которое отвечает за правильную обработку таких файлов.
Сервер для PHP можно запустить на вашем компьютере, но без дополнительной настройки он будет виден только лично вам. Это нормальная ситуация при разработке продукта, но для реальной боевой задачи нужно будет поднять сервер где-то в интернете.
Когда мы делали проект «Публикуем свою страницу в интернете», то уже использовали сервер (эту услугу нам предоставила хостинговая компания SpaceWeb). Этот же сервер мы можем использовать для нашей сегодняшней задачи, потому что он тоже умеет работать с PHP-файлами:
Готовим страницу с формой
Возьмём стандартный шаблон страницы и наполним его стилями и кодом для формы.
<!DOCTYPE html>
<html>
<!-- Служебная часть -->
<head>
<!-- Заголовок страницы -->
<title>Заголовок</title>
<!-- Настраиваем служебную информацию для браузеров -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
/* Тут будут стили */
</style>
<!-- Закрываем служебную часть страницы -->
</head>
<body>
<!-- Тут будет наша страница -->
</body>
<!-- Конец всей страницы -->
</html>Пропишем CSS-стили, чтобы наша страница выглядела опрятно. Забежим немного вперёд и используем в стилях разделы input и textarea:
/*Задаём общие параметры для всей страницы: шрифт и отступы*/
body {
/*text-align: center;*/
margin: 10;
font-family: Verdana, Arial, sans-serif;
font-size: 16px;
}
/* Настраиваем внешний вид полей ввода*/
input {
display: inline-block;
margin: 10px auto;
border: 2px solid #eee;
padding: 10px 20px;
font-family: Verdana, Arial, sans-serif;
font-size: 16px;
}
textarea {
display: inline-block;
margin: 10px auto;
border: 2px solid #eee;
padding: 10px 20px;
font-family: Verdana, Arial, sans-serif;
font-size: 16px;
}
Чтобы сделать форму на странице, мы будем использовать такие теги:
<input> — для ввода имени, почты для связи и темы письма. Они занимают одну строку, нам этого достаточно.
<textarea> — здесь будут писать само сообщение, поэтому нужно будет сделать это поле побольше и пошире.
Ещё мы воспользуемся тегом <form> — он мысленно собирает наши поля в одну форму и помогает управлять ими из одного места. У каждой формы есть свой метод, по которому она работает с данными. Форма может или отправлять данные (post), или получать их (get). Так как нам надо отправить сообщение в PHP-скрипт, будем использовать метод post. Сразу пропишем путь к скрипту на сервере — по этому адресу мы зальём нужный файл на следующем этапе. Этот скрипт, который мы позже напишем, и есть обработчик формы.
Оформим всё в виде кода:
<!-- Создаём форму и указываем её обработчик и метод -->
<form action="http://mihailmaximov.ru/projects/mail/post.php" method="post" name="form">
<!-- Поле ввода имени -->
<input name="name" type="text" placeholder="Ваше имя" />
<br>
<!-- Поле ввода почты -->
<input name="email" type="text" placeholder="Ваша почта" />
<br>
<!-- Поле ввода для темы сообщения -->
<input size="30" name="header" type="text" placeholder="Тема" />
<br>
<!-- Текстовое поле для самого сообщения -->
<textarea cols="32" name="message" rows="5"> Текст сообщения
</textarea>
<br>
<!-- Кнопка с надписью «Отправить», которая запускает обработчик формы -->
<input type="submit" value="Отправить" />
</form>
Пишем обработчик формы на PHP
Когда мы заполним и отправим форму на нашей странице, произойдёт следующее:
- Браузер соберёт введённые нами данные и скомпонует таким образом, чтобы их можно было передать в программу на PHP. Как бы упакует в посылку.
- В нашей PHP-программе мы сможем получить доступ к этим данным, как бы засосать их в память и хранить в переменных. Можно представить, что мы распакуем посылку и сможем пользоваться её содержимым.
- Скрипт PHP что-то сделает с полученными данными, а потом выплюнет пользователю какой-то ответ. Этот ответ будет отображён в виде веб-страницы в браузере.
Логика работы PHP-программы будет такая:
- получаем значения переменных из тех данных, которые получил обработчик;
- готовим сообщение, где укажем все поля в форме;
- отправляем это сообщение и смотрим на результат выполнения функции отправки;
- если письмо ушло по нужному адресу — пишем, что всё хорошо, если нет — говорим, что что-то не так;
- через 10 секунд после вывода сообщения автоматически переходим на сайт «Кода» 🙂
Мы специально делаем так, чтобы форма отсылала письма на тот же адрес, который одновременно и адрес отправителя. Это сделано для того, чтобы вы получали эти письма, когда будете тестировать сервис. В рабочем проекте замените переменную $email в функции send() на свой настоящий адрес, чтобы самим получать письма из формы.
<!-- Через 10 секунд после появления сообщения об отправке или ошибке — отправляемся на сайт Кода 🙂 -->
<meta http-equiv='refresh' content='10; url=http://thecode.local/'>
<meta charset="UTF-8" />
<!-- Начался блок PHP -->
<?php
// Получаем значения переменных из пришедших данных
$name = $_POST['name'];
$email = $_POST['email'];
$header = $_POST['header'];
$message = $_POST['message'];
// Формируем сообщение для отправки, в нём мы соберём всё, что ввели в форме
$mes = "Имя: $name nE-mail: $email nТема: $header nТекст: $message";
// Пытаемся отправить письмо по заданному адресу
// Если нужно, чтобы письма всё время уходили на ваш адрес — замените первую переменную $email на свой адрес электронной почты
$send = mail($email, $header, $mes, "Content-type:text/plain; charset = UTF-8rnFrom:$email");
// Если отправка прошла успешно — так и пишем
if ($send == 'true') {echo "Сообщение отправлено";}
// Если письмо не ушло — выводим сообщение об ошибке
else {echo "Ой, что-то пошло не так";}
?>Отправляем PHP-скрипт на сервер
Последнее, что осталось сделать — загрузить файл скрипта на сервер. Для этого сохраним его как post.php и загрузим по адресу mihailmaximov.ru/projects/mail/post.php. Если у вас ещё нет своего сервера, можете использовать этот скрипт для тестирования формы обратной связи.
Как загружать файлы, мы рассказывали в статье про публикацию сайта в Сети, поэтому просто сделаем всё по той инструкции:
Теперь, когда мы обновим HTML-страницу, заполним все поля и нажмём «Отправить», на указанную почту придёт письмо с нашим сообщением. Это значит, что форма работает, а мы с вами сделали очередной полезный проект!
Что дальше
Дальше как обычно — улучшаем.
- Например, сейчас, если не заполнить поле с темой или адресом, то будет ошибка и письмо не уйдёт. При этом пользователь не будет знать, что же именно он сделал не так. Можно организовать проверку на заполнение полей и выводить нужные сообщения, если что-то не заполнено.
- Всегда можно улучшить безопасность и защитить скрипт от многократных запросов — чтобы никто не абьюзил сервис и не делал из нас спамеров.
- А ещё при отправке мы переходим на страницу обработчика, а потом вообще на другой сайт. Чтобы сделать как у всех, чтобы форма отправлялась без перезагрузки страницы, можно использовать Ajax. Когда-нибудь доберёмся и до него. Подписывайтесь, чтобы не пропустить.
Доброе время суток, уважаемые форумчане. Вопрос заключается в следующем. На HTML форме, есть кнопка вот ее код
| HTML5 | ||
|
Вопрос, зная весь этот код, как мне найти место на странице где происходит обработка формы, после нажания данной конопки.
Заранее благодарю за ответ.
Обработчик форм
Продолжим изучение создания форм из наших уроков по html. В предыдущем уроке мы создали форму заказа товара. Но она еще не работает, так как у нас нет обработчика этой формы.
А перед тем, как мы приступим к созданию обработчика формы, желательно установить локальный сервер без которого ну никак не проверить работу нашего обработчика.
Первым делом необходимо создать файл, который будет обрабатывать форму. Открываем программу “Блокнот” – файл – сохранить как. Имя файла – пишем, например, obrabotka.php (расширение .php). Не забывайте “Тип файла” – выбираем “Все файлы”. Сохраняем в папку с нашими предыдущими файлами html.
И так, файл-обработчик мы создали, осталось только прописать в нем код. Но перед этим нам надо понять один важный момент: вся информация, которую пользователь прописывает в каждом поле формы заносится в соответственный контейнер и передается в обработчик после нажатия кнопки “Отправить”.
Все, что прописано в поле “Введите свое ФИО” поместится в контейнер fio (name=”fio”) .
Все, что прописано в поле “Введите пароль” поместится в контейнер pass (name=”pass”).
Все, что прописано в поле “Введите свой email” поместится в контейнер email (name=”email”) и т.д.
Вот таким образом работает форма. Все, что мы вводим в поля формы помещается в спец. контейнеры (переменные) и отправляется в обработчик (файл, который мы прописывали в html-коде формы):
<form action=”obrabotka.php” method=“POST” name=”form1″>
Однако, хочу сделать одно замечание. Некоторые хостинги, где вы будете публиковать свой сайт, могут не поддерживать передачу переменных методом POST сразу же в обычные переменные, а передают их только в глобальный массив $_POST[“Имя“].
Т.е. перед написанием функции нам необходимо обычным переменным присвоить значение глобального массива $_POST[]. Для нашего обработчика создаем конструкцию такого вида:
Пример:
$fio = $_POST[‘fio‘];
$pass = $_POST[‘pass‘];
$email = $_POST[‘email‘];
$format = $_POST[‘format‘];
$site = $_POST[‘site‘];
$book = $_POST[‘book‘];
$delivery = $_POST[‘delivery‘];
$address = $_POST[‘address‘];
После того, как мы сделали такую подстраховку, ниже нее можно спокойно употреблять обычные переменные $имя. Без этой записи обработчик отправит сообщение, но в сообщении не будет ни одной данной, внесенной пользователем в поля формы.
Теперь, в файле obrabotka.php, напишем функцию, которая всю эту информацию будет обрабатывать и отправлять на электронный адрес автора сайта email-сообщение со всеми данными, занесенными пользователем в форму.
Данный файл будем писать на языке php (но углубляться в изучение этого языка программирования мы не будем). Просто создадим шаблон, чтобы вы имели представление как это все делать и могли корректировать его под себя.
Функция на языке php пишется внутри символов: открывающего <?php и закрывающего ?>.
Для отправки сообщения владельцу сайта пишем функцию mail. В круглых скобках прописываем три параметра. Заканчивается функция точкой с запятой.
Пример:
<?php
mail( );
?>
Каждый параметр пишем в кавычках и отделяем один от другого запятой.
Пример:
<?php
mail(“
Этот e-mail адрес защищен от спам-ботов, для его просмотра у Вас должен быть включен Javascript
“,”Заказ с сайта“,”Текст сообщения“ );
?>
Параметры нашего обработчика:
Этот e-mail адрес защищен от спам-ботов, для его просмотра у Вас должен быть включен Javascript
– адрес эл. почты, куда будет отправлено сообщение.
Заказ с сайта – тема сообщения.
Текст сообщения – текст сообщения с данными, введенными в форму, которое будет отправлено.
Текст сообщения рассмотрим поподробнее:
пишем текст сообщения, подставляя соответствующие контейнеры с данными пользователя, отправленные в обработчик.
Пример:
“На сайте был сделан заказ. Заказ пришел от: $fio
$fio – это содержимое контейнера с именем fio (данные, введенные в поле “Введите свое ФИО”). Имя контейнера (переменной) пишем со значком $.
Пишем далее:
“На сайте был сделан заказ. Заказ пришел от: $fio Его пароль: $pass Его email: $email Выбрал формат диска: $format
Далее идет – “какой курс выбрал пользователь?”. Здесь небольшое усложнение.
Пользователю предлагается выбрать “Курс по созданию сайтов” и “Курс по созданию книг“, а можно заказать и оба курса сразу.
Если выбран “Курс по созданию сайтов” в обработчик летит контейнер (переменная) site.
Если выбран “Курс по созданию книг” в обработчик летит переменная book.
Если выбраны оба курса – в обработчик отправляется и переменная site и переменная book.
В этом случае необходимо в обработчике прописать небольшую проверку: существуют ли такие переменные или нет?
Если какая то переменная существует – значит пользователь сделал соответственный заказ. Проверку пишем до написания функции:
Пример:
if (isset($site)) {$site=”да“;} else {$site=”нет“;}
if – с английского “если” – далее в круглых скобках “какое условие мы проверяем”
isset – с английского “существует” – и в скобках указываем что именно существует – переменная ($site)
далее в фигурных скобках пишем – что нужно в этом случае сделать – {$site=”да”;} – переменной site присвоить значение “да”.
else – с английского “иначе” – если такой переменной не существует – {$site=”нет”;} – переменной site присвоить значение “нет”.
Расшифруем все вместе:
если существует переменная site то переменной site присвоить значение “да” иначе переменной site присвоить значение “нет”.
Такую же проверку напишем и для переменной book:
Пример:
if (isset($book)) {$book=”да“;} else {$book=”нет“;}
Дописываем текст сообщения:
Пример:
“На сайте был сделан заказ. Заказ пришел от: $fio Его пароль: $pass Его email: $email Выбрал формат диска: $format Выбрал курсы: Курс по созданию сайта: $site Курс по созданию книг: $book Выбрал тип доставки: $delivery Адрес для доставки: $address“
Само сообщение мы сформировали. Осталось подправить один момент: данное сообщение придет на нашу электронную почту одной длинной строкой. Чтобы этого не произошло нам необходимо в подходящих местах проставить переносы строк с помощью специального символа n.
Пример:
“На сайте был сделан заказ. n Заказ пришел от: $fio n Его пароль: $pass n Его email: $email n Выбрал формат диска: $format n Выбрал курсы: n Курс по созданию сайта: $site n Курс по созданию книг: $book n Выбрал тип доставки: $delivery n Адрес для доставки: $address“
Запишем код нашего обработчика формы полностью:
Пример:
<?php
$fio = $_POST[‘fio‘];
$pass = $_POST[‘pass‘];
$email = $_POST[‘email‘];
$format = $_POST[‘format‘];
$site = $_POST[‘site‘];
$book = $_POST[‘book‘];
$delivery = $_POST[‘delivery‘];
$address = $_POST[‘address‘];
if (isset($site)) {$site=”да“;} else {$site=”нет“;}
if (isset($book)) {$book=”да“;} else {$book=”нет“;}
mail(“
Этот e-mail адрес защищен от спам-ботов, для его просмотра у Вас должен быть включен Javascript
“,”Заказ с сайта“,”На сайте был сделан заказ. n Заказ пришел от: $fio n Его пароль: $pass n Его email: $email n Выбрал формат диска: $format n Выбрал курсы: n Курс по созданию сайта: $site n Курс по созданию книг: $book n Выбрал тип доставки: $delivery n Адрес доставки: $address“);
echo ‘Сообщение отправлено.’;
?>
Для проверки работы созданной нами формы и обработчика к ней, необходимо на свой компьютер установить локальный сервер.
