HTML-формы. PHP и формы

Сегодня будем работать над созданием красивой 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). Текст во всплывающей подсказке для каждого поля контактной формы можно задать любой. Если такая фишка вам не нужна – просто удалите весь тег .

Поля для ввода самого сообщения размечается тегом , в котором cols задает количество символов поля в ширину, а rows число строк.</p><p><b>Защита от спама </b> – невидимое поле с именем name=bezspama. У него стоит стиль display:none – это значит поле невидимо людям, но боты его будут заполнять на автомате.</p><p>И завершающий элемент любой формы – кнопка отправки сообщения, она задается тегом <button> </button>, имеющим свой класс для настройки внешнего вида и тип “submit”.</p><p>Для добавления или удаления полей, достаточно убрать ненужные или вставить новые по аналогии с существующими, прописав для них все свойства и имена.</p><h2>Оформление CSS стилями</h2><p>Если вы посмотрите в браузере на то, что получилось, то увидите нечто корявое и непривлекательное. Для того, чтобы у нас получилась красивая форма обратной связи, придется поработать над ее стилями (html будет недостаточно).</p><p>Если вы владеете CSS, то задать оформление для всех элементов формы сможете без проблем, тут даже не потребуется моя помощь.</p><p>Если же вы не знакомы со стилями, то я просто дам вам готовый файл, в котором уже все прописано таким образом, что ваша форма будет идентична той, что в примере.</p><p>Подключить стили можно двумя способами:</p><ol><li>Скопировать содержимое файла в файл style.css, который уже есть на вашем сайте (добавьте в самый конец)</li><li>Поместить файл, который я дал, на ваш хостинг и подключить его.</li> </ol><p>Подключаются файлы стилей следующим кодом <link rel=”stylesheet” media=”screen” href=”styles.css” >, размещаемым внутри <head></head>. Если файл со стилями (styles.css) находится не в одной папке с html страницей, то пропишите полный путь до него.</p><p>В файле со стилями, который я дал, каждый элемент подписан, поэтому, вы можете вносить в него любые изменения – менять цвета, размеры, форму, эффекты. Владея самыми базовыми знаниями, вы сможете легко его править.</p><h2>Настройка PHP кода (добавлена защита от спама)</h2><p>Как и в случае со стилями, я дам вам готовый код, обрабатывающий HTML форму обратной связи и защищающий от спама. Этот файл адаптирован для конкретной конфигурации и, если вы захотите задать новые поля или удалить существующие, в него придется вносить изменения. Поэтому, я расскажу вам, как он работает, чтобы вы поняли, что нужно менять.</p><blockquote><p>Для сайтов, использующих кодировку windows-1251 и версию php 5.4+, в код нужно будет внести дополнение, связанное с функцией htmlspecialchars. Покажу его ниже. Иначе, вместо кириллицы будут приходить пустые поля.</p> </blockquote><p>Помните, в свойствах формы (в html файле) мы указывали параметр action=”contact-form.php”. Вам нужно создать файл с названием contact-form.php и поместить в него находящийся ниже код.</p><p><?php /* Задаем переменные */ $name = htmlspecialchars($_POST["name"]); $email = htmlspecialchars($_POST["email"]); $tel = htmlspecialchars($_POST["tel"]); $website = htmlspecialchars($_POST["website"]); $message = htmlspecialchars($_POST["message"]); $bezspama = htmlspecialchars($_POST["bezspama"]); /* Ваш адрес и тема сообщения */ $address = "pochta@kakoy-to-sajt.com"; $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("Refresh: 5; URL=https://сайт"); echo "<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head> <body></body>";} else { header("Refresh: 5; URL=https://сайт"); echo "<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head> <body></body>";} } exit; /* Выход без сообщения, если поле bezspama заполнено спам ботами */ ?></p><table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td><td class="crayon-code"><p><?php </p><p>/* Задаем переменные */ </p><p>$name = htmlspecialchars ($_POST [ "name" ] ) ; </p><p>$email = htmlspecialchars ($_POST [ "email" ] ) ; </p><p>$tel = htmlspecialchars ($_POST [ "tel" ] ) ; </p><p>$website = htmlspecialchars ($_POST [ "website" ] ) ; </p><p>$message = htmlspecialchars ($_POST [ "message" ] ) ; </p><p>$bezspama = htmlspecialchars ($_POST [ "bezspama" ] ) ; </p><p>/* Ваш адрес и тема сообщения */ </p><p>$sub = <span>"Сообщение с сайта ХХХ" </span>; </p><p>/* Формат письма */ </p><p>$mes = <span>"Сообщение с сайта ХХХ.\n </p><p>Имя отправителя: $name </p><p>Электронный адрес отправителя: $email </p><p>Телефон отправителя: $tel </p><p>Сайт отправителя: $website </p><p>Текст сообщения: </p><p>$message" ; </p><p>if (empty ($bezspama ) ) <span>/* Оценка поля bezspama - должно быть пустым*/ </p><p>/* Отправляем сообщение, используя mail() функцию */ </p><p>$from = <span>"From: $name <$email> \r\n Reply-To: $email \r\n" </span>; </p><p>if (mail ($address , $sub , $mes , $from ) ) { </p><p>header () ; </p><p>echo "<head> </p><p> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head> </p><p> <body>Письмо отправлено, через 5 секунд вы вернетесь на страницу XXX</body>" </span>; } </p><p>else { </p><p>header (<span>"Refresh: 5; URL=https://сайт" </span>) ; </p><p>echo "<head> </p><p> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head> </p><p> <body>Письмо не отправлено, через 5 секунд вы вернетесь на страницу YYY</body>" </span>; } </p><p>exit ; <span>/* Выход без сообщения, если поле bezspama заполнено спам ботами */ </p> </td> </tr></table><p>Первым делом нам необходимо задать переменные, которые будут обрабатываться php кодом. Для того, чтобы не запутаться, присваиваем им такие же имена, как были в самой форме, только начинаются все переменные со знака $. Сама команда присвоения значения имеет такой вид:</p><p>$название = htmlspecialchars($_POST["название"]);</p><table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td><td class="crayon-code"><p>$ название= htmlspecialchars ($ _POST [ "название" ] ) ; </p> </td> </tr></table><p>Если вы добавляли какие-то дополнительные поля данных, то в блоке переменных допишите их имена.</p><p>Не все переменные мы берем из формы. Как минимум, адрес электронной почты, на который придет письмо (ваш адрес) указывается отдельно. В данном случае это переменная $address – впишите в ее значение свой электронный ящик.</p><p>Также, в данном примере явным образом задано значение переменной $sub – она будет выдавать тему письма. Можно добавить тему сообщения в HTML форму в виде текстового поля (наподобие name), и брать значение этой переменной оттуда.</p><p>В блоке формат письма настраивается то сообщение, которое получите вы. Он может отличаться от того, что было написано в поле textarea под названием message. Я просто сделал еще одну переменную $mes и включил в нее дополнительный текст и важные данные отправителя (имя, почту, телефон, сайт). Эту часть вы можете сконфигурировать так, как вам удобно.</p><p>Чтобы получаемые вами письма подписывались именем отправителя, и в них включался их обратный адрес, а не адрес сервера, на котором находится ваш php файл, мы задаем новую переменную $from, в нее включаем имя и электронный ящик отправителя письма.</p><p>Затем функция mail осуществляет отправку письма по заданным параметрам. В случае успешной отправки появляется сообщение о том, что письмо отправлено, а через 5 секунд пользователя перебрасывает на страницу вашего сайта (адрес страницы и время задержки вы можете изменить). Если письмо отправить не удалось, появляется сообщение, что письмо не отправлено и через 5 секунд идет переход на страницу сайта, аналогичным образом вы можете задать адрес страницы и время.</p> <h2>Вставка формы на страницу сайта</h2><p>Для того, чтобы вставить созданную вами форму обратной связи, вам нужно скопировать html код формы и вставить его в ту часть кода страницы, где вы хотите вывести обратную связь для сайта.</p><p>Еще раз хочу напомнить, если файл с PHP программой находятся не в той же папке, что и страница, на которой размещен html код, то в коде самой формы нужно прописать полный путь к нему, иначе, работать не будет, так как форма не найдет файл обработчик.</p><p><b><span>Скачать файлы контактной формы </span> </b></p><h2>Активный анти спам с вводом данных в поле</h2><p>Спамеры действуют с помощью различных программных средств и некоторые боты умеют обходить защиту с пустым полем, которая встроена в базовую версию. Если они вас начинают донимать, то можно применить вместо или дополнительно простую защиту со вводом данных в специальное поле. Например, сделать математическое выражение с просьбой ввести ответ или задать какой-либо простой вопрос. Больших изменений в форме это не потребует.</p><p>Я покажу как изменить код формы и PHP обработчик для использования этого метода антиспама. При желании вы можете не менять защиту с пустым полем, а добавить соответствующие строки в код и у вас будет работать одновременно 2 метода – по идее, должно быть более эффективно.</p><p>Первым делом нам необходимо добавить поле для ввода и вопрос в HTML код. В качестве основы у нас уже есть строка 25 (input name = “bezspama” ). Это поле невидимо. Мы превращаем его в обычное. Для этого всю строку меняем на вот такой блок:</p><p><p> <label for="bezspama">2+2*2=:</label> <input name="bezspama" type="text" required /> </p></p><table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td><td class="crayon-code"><p><p><label for = "bezspama" > 2+2*2=: </label> </p><p><input name = "bezspama" type = "text" required /> </p> </p> </td> </tr></table><p>Вместо математического выражения 2+2*2 можете ввести любые данные – это визуальный вопрос для пользователя. Из поля input мы убрали стиль display:none и добавили обязательность заполнения.</p><p>Следующим шагом меняем данные в PHP обработчике, чтобы он делал проверку уже не на пустоту этого поля, а на правильность введенных данных. Проверка у нас делалась в строке 25 выражением empty ($bezspama ) . Мы меняем это выражение и будем делать проверку равенства заполненного поля заранее заданному числу. В моем примере, математическое выражение равно 6, поэтому вся строка будет выглядеть вот так.</p> <p>Ни для кого не является секретом, что наиболее распространенным способом взаимодействия html-страницы с сайтом является форма. Форма (то есть, html-элемент образуемый тегом form) используется и бесплатными почтовыми службами, электронными магазинами и многими другими типами сайтов.</p> <p>Обработка простых форм посредством PHP не представляет никакого труда. Однако время от времени возникает потребность обработать форму, содержащую несколько однотипных полей, притом, что их количество может изменяться в широком диапазоне и их количество заранее не известно. В PHP предусмотрено для таких случаев обработка однотипных полей как массива значений.</p> <p>Рассмотрим подробнее варианты для разных типов полей.</p> <h2>Текстовые поля</h2> <p>Под текстовыми полями в этой статье понимаются элементы, создаваемые тегам input со значением параметра type равным text и тегом textarea . Организовать обработку формы состоящей из нескольких таких полей проще всего. На листинге ниже приведен листинг с html-разметкой для такой формы.</p> <p><form action="do.html" method="post"> <input type="text" name="txt" value=""><br> <input type="text" name="txt" value=""><br> <input type="text" name="txt" value=""><br> <input type="text" name="txt" value=""><br> <input type="text" name="txt" value=""><br> <input type="submit" value="Отправить"> </form></p> <p>Как видно из листинга, имена для элементов формы, с точки зрения PHP , являются элементами массива. Поэтому PHP -сценарий, который будет обрабатывать эту форму, будет воспринимать все множество текстовых полей этой формы как единый массив. К отдельным элементам можно обращаться по индексам или использовать перечисление при помощи команд list и each , как это сделано в следующем примере.</p> <p><?php while(list($key,$val) = each($txt)) echo "ключ - $key, значение - $val<br>n"; ?></p> <h3>Переключатели</h3> <p>Переключателями (checkbox ) в этой статье называются элементы, создаваемые тегам input со значением параметра type равным checkbox . Форма для использования переменного количества «переключателей » строится абсолютно так же. Обратите внимание, что выбор конкретного значения переключателя (то есть значение свойства value) не важен. Пример приведен в листинге ниже:</p> <p><form action="do.html" method="post"> <input type="checkbox" name="chb" value="1"><br> <input type="checkbox" name="chb" value="1"><br> <input type="checkbox" name="chb" value="1"><br> <input type="checkbox" name="chb" value="1"><br> <input type="checkbox" name="chb" value="1"><br> <input type="submit" value="Отправить"> </form></p> <p>Однако обработка такой формы отличается от обработки, описанной для текстовых полей. В данном случае необходимо определить, включил или нет посетитель сайта тот или иной переключатель. Если включил — то соответствующий элемент массива существует, если нет — то отсутствует. В следующем листинге приведен пример PHP сценария, который распечатывает включенные переключатели:</p> <h3>Радио-кнопки</h3> <p>Перед тем как описывать обработку радио-кнопок необходимо вспомнить, как они работают. Суть радио-кнопок (элементы созданные тегами input со значением параметра type равным radio ) заключается в том что, выбирая одну кнопку, пользователь автоматически снимает выделение с другой кнопки из этого же набора. Кнопки объединяются в набор очень просто: у всех кнопок в наборе одно и тоже имя.</p> <p>А вот значения (то есть параметры value ) у кнопок в наборе — разные. И на сайт будет отправлено значение выбранной кнопки с именем набора. Так же как и в случае с текстовыми полями и переключателями имена наборов радио-кнопок должны оформляться как имена элементов массива в PHP. Пример такой формы приведен в следующем листинге:</p> <p><form action="do.html" method="post"> // первый набор кнопок <input type="radio" name="rdi" value="1"> <input type="radio" name="rdi" value="2"> <input type="radio" name="rdi" value="3"><br> // второй набор кнопок <input type="radio" name="rdi" value="1"> <input type="radio" name="rdi" value="2"> <input type="radio" name="rdi" value="3"><br> // третий набор кнопок <input type="radio" name="rdi" value="1"> <input type="radio" name="rdi" value="2"> <input type="radio" name="rdi" value="3"><br> <input type="submit" value="Отправить"> </form></p> <p>Обработка радио-кнопок объединяет идеи, использование при обработке, как текстовых полей, так и переключателей. Если автор html-страницы не установил значение по умолчанию, а пользователь не выбрал определенную кнопку в наборе радио-кнопок, то данный элемент будет отсутствовать в массиве (как для переключателей).</p> <p>Если же кнопка выбрана, то соответствующий элемент массива будет содержать ее значение (как для текстовых полей). Ниже приведен листинг примера, обрабатывающего форму с несколькими наборами радио-кнопок.</p> <p><?php while(list($key,$val) = each($rdi)) echo "ключ - $key, значение - $val<br>n"; ?></p> <p>Таким образом, ничего сложного в обработке сложных форм нет.</p> <p>Чтобы организовать передачу данных на сервер с помощью формы, потребуется реализовать HTML форму, в которую посетители сайта будут вводить свою информацию и PHP код, назначение которого в принятии и обработке полученных данных на сервере.</p> <h2>HTML форма отправки данных</h2> <p>Форма на странице формируется тегами <form>...</form>, внутри которых помещаются теги полей для ввода текстовой информации, теги специальных компонентов (например, поле со списком), теги для поля выбора и загрузки файла .</p> <p>* Для HTML5 так же существует возможность размещать теги полей формы не внутри тегов формы, а в любом месте на странице. При этом для каждого такого поля нужно указывать атрибут "form", чтобы определить с какой формой отправки он должен взаимодействовать.</p> <p>Итак, простейшая форма отправки может содержать следующий код:</p> <p><form action="myform.php" method="post"> </span><br><span>Значение А: <input type="text" name="data1"> </span><br><span>Значение Б: <input type="text" name="data2"> </span><br><span><input type="submit" value="Отправить"> </span><br></form> </p> <p>Элементы формы и их параметры:</p> <p><b>action="myform.php" </b> – атрибут "action" определяет, какой php-файл будет обрабатывать отправляемые данные. В этом примере, данные будут отправлены в файл "myform.php", находящийся в той же директории что и страница с формой. Если этот атрибут не указать явно, данные формы будут отправлены по адресу страницы самой формы.</p> <p><b>method="post" </b> – параметр method определяет метод передачи данных POST или GET. Более подробно об этом в статье "Отличия методов POST или GET" . Если не указывать атрибут явно, по умолчанию будет использоваться метод GET.</p> <p>Текст <b>"Значение А:" </b> и <b>"Значение Б:" </b> добавлен только с целью оформления и понятности формы для пользователя. Добавлять это для передачи данных не обязательно, но для того, чтобы пользователю стало понятно, что вводить, стоит указывать.</p> <p>Теги <b><input> </b> используются для формирования различных управляющих элементов формы.</p> <p><b>type="text" </b> – атрибут "type" определяет вид поля. В зависимости от того, какой тип указан, меняется и внешний вид элемента, и его назначение. Значение атрибута "text" указывает, что в браузере элемент будет отображаться однострочным текстовым полем, куда пользователь сможет ввести свою строку.</p> <p><b>name="data1" </b> – атрибут "name", указывает имя, вернее индекс данных в массиве, полученных сервером. Это обязательный параметр, по которому в php-обработчике можно будет затем получить доступ переданному значению. Имя может быть выбрано произвольно, однако, удобнее когда это значение имеет какой-то понятный смысл.</p> <p><b>type="submit" </b> – тег <input> с таким значением параметра "type" будет отображаться на странице как кнопка. На самом деле на форме можно обойтись и без кнопки. Если, например, в форме есть текстовые поля, то отправку можно осуществить, просто нажав "Ввод" на клавиатуре. Но наличие кнопки делает форму более понятной.</p> <p><b>value="Отправить" </b> – в данном случае (для type="submit") определяет только надпись на кнопке. Для type="text", например, это будет текст, который будет выведен в текстовом поле.</p> <p>В итоге, на странице этот код будет выглядеть приблизительно так:</p> <form action="" method="post"> Значение А: <input type="text" name="data1"><br>Значение Б: <input type="text" name="data2"><br><input type="submit" value="Отправить"></form> <p>По нажатию на кнопку, будет выполнена отправка данных на указанную страницу, и если она существует и корректно работает, данные будут обработаны.</p> <h2>Обработка отправленных HTML формой данных в PHP</h2> <p>Отправленные описанным способом данные, помещаются в суперглобальные массивы $_POST, $_GET и $_REQUEST. $_POST или $_GET будут содержать данные в зависимости от того, каким методом осуществлялась отправка. $_REQUEST содержит отправленные данные любым из указанных методов.</p> <p>$_POST, $_GET и $_REQUEST – это ассоциативные массивы, поля-индексы которых совпадают с атрибутами "name" тегов <input>. Соответственно, для работы с данными в файле myform.php можно присвоить переменным значения элементов такого массива указав в качестве индекса имя поля:</p> <p>// для метода GET <br>$a = $_GET[<span>"data1" ]; </span><br>$b = $_GET[<span>"data2" ]; </p><p>// для метода POST <br>$a = $_POST[<span>"data1" ]; </span><br>$b = $_POST[<span>"data2" ]; </p><p>// при любом методе </span><br>$a = $_REQUEST[<span>"data1" ]; </span><br>$b = $_REQUEST[<span>"data2" ]; </p> <h2>Проверка заполнения полей формы</h2> <p>Иногда при получении данных нужно проверить, не отправил ли пользователь пустую форму. Для этого можно использовать функцию empty .</p> <p>if (empty ($_REQUEST["data1" ])) { </span><br><span>echo <span>"Поле не заполнено" </span>; </span><br>} <span>else { </span><br><span>echo <span>"Поле было заполнено" </span>; </span><br>$a = $_REQUEST[<span>"data1" ]; </span><br>} </p> <p>Обычно этого решения достаточно. Если нужно вводить текст, то будет понятно, введен он или нет. Однако, если пользователь намеренно для вычислений введет ноль, то функция empty покажет, что значения нет. Поэтому для таких ситуаций лучше использовать функцию isset . Она будет явно проверять, заданно ли значение или нет.</p> <p>if (isset ($_REQUEST["data1" ])) { </span><br><span>echo <span>"Поле было заполнено" </span>; </span><br>$a = $_REQUEST[<span>"data1" ]; </span><br>} <span>else { </span><br><span>echo <span>"Поле не заполнено" </span>; </span><br>} </p> <p>Одно из главнейших достоинств PHP - то, как он работает с формами HTML. Здесь основным является то, что каждый элемент формы автоматически становится доступным вашим программам на PHP. Для подробной информации об использовании форм в PHP читайте раздел . Вот пример формы HTML:</p> <p><b>Пример #1 Простейшая форма HTML </b></p> <p><form action="action.php" method="post"> <p>Ваше имя: <input type="text" name="name" /></p> <p>Ваш возраст: <input type="text" name="age" /></p> <p><input type="submit" /></p> </form></p> <p>В этой форме нет ничего особенного. Это обычная форма HTML без каких-либо специальных тегов. Когда пользователь заполнит форму и нажмет кнопку отправки, будет вызвана страница action.php . В этом файле может быть что-то вроде:</p> <p><b>Пример #2 Выводим данные формы </b></p> <p>Здравствуйте, <?php echo htmlspecialchars ($_POST [ "name" ]); ?> .<br>Вам <?php echo (int) $_POST [ "age" ]; ?> лет. </p> <p>Пример вывода данной программы:</p> <p>Здравствуйте, Сергей. Вам 30 лет.</p> <p>Если не принимать во внимание куски кода с <span>htmlspecialchars() </span> и <i>(int) </i>, принцип работы данного кода должен быть прост и понятен. <span>htmlspecialchars() </span> обеспечивает правильную кодировку "особых" HTML-символов так, чтобы вредоносный HTML или Javascript не был вставлен на вашу страницу. Поле age, о котором нам известно, что оно должно быть число, мы можем просто преобразовать в <span>integer </span>, что автоматически избавит нас от нежелательных символов. PHP также может сделать это автоматически с помощью расширения filter . Переменные $_POST["name"] и $_POST["age"] автоматически установлены для вас средствами PHP. Ранее мы использовали суперглобальную переменную $_SERVER , здесь же мы точно так же используем суперглобальную переменную $_POST , которая содержит все POST-данные. Заметим, что <i>метод отправки </i> (method) нашей формы - POST. Если бы мы использовали метод <i>GET </i>, то информация нашей формы была бы в суперглобальной переменной $_GET . Кроме этого, можно использовать переменную $_REQUEST , если источник данных не имеет значения. Эта переменная содержит смесь данных GET, POST, COOKIE.</p> <p><b>15 years ago </b></p> <p>According to the HTTP specification, you should use the POST method when you"re using the form to change the state of something on the server end. For example, if a page has a form to allow users to add their own comments, like this page here, the form should use POST. If you click "Reload" or "Refresh" on a page that you reached through a POST, it"s almost always an error -- you shouldn"t be posting the same comment twice -- which is why these pages aren"t bookmarked or cached.</p><p>You should use the GET method when your form is, well, getting something off the server and not actually changing anything. For example, the form for a search engine should use GET, since searching a Web site should not be changing anything that the client might care about, and bookmarking or caching the results of a search-engine query is just as useful as bookmarking or caching a static HTML page. </p> <p><b>1 year ago </b></p> <p>Worth clarifying: </p><p>POST is not more secure than GET. </p><p>The reasons for choosing GET vs POST involve various factors such as intent of the request (are you "submitting" information?), the size of the request (there are limits to how long a URL can be, and GET parameters are sent in the URL), and how easily you want the Action to be shareable -- Example, Google Searches are GET because it makes it easy to copy and share the search query with someone else simply by sharing the URL. </p><p>Security is only a consideration here due to the fact that a GET is easier to share than a POST. Example: you don"t want a password to be sent by GET, because the user might share the resulting URL and inadvertently expose their password.</p><p>However, a GET and a POST are equally easy to intercept by a well-placed malicious person if you don"t deploy TLS/SSL to protect the network connection itself. </p><p>All Forms sent over HTTP (usually port 80) are insecure, and today (2017), there aren"t many good reasons for a public website to not be using HTTPS (which is basically HTTP + Transport Layer Security). </p><p>As a bonus, if you use TLS you minimise the risk of your users getting code (ADs) injected into your traffic that wasn"t put there by you. </p> <p>Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье вы узнали о том, что такое сериализация в php . В данной статье я бы хотел рассказать о том, как работать с <b>формами в PHP </b>. Язык PHP предназначен для программирования web-сценариев, и обработка форм занимает, пожалуй, самое главное место в этом процессе. Сейчас уже и не встретить сайтов, на которых не было бы, к примеру, регистрации или формы обратной связи, или опросника. Форумы, интернет-магазины, добавление комментария, отправка сообщения в социальной сети — всё это обработка данных, помещенных в поля формы. Давайте на примере разберемся, как <span>обрабатывать формы на PHP </span>. <br> Будем реализовывать простую задачу: необходимо создать 2 поля (имя и фамилия), передать эти данные скрипту action.php , в результате должно выйти приветствие <span>"Добро пожаловать, фамилия имя" </span>. Кто забыл, как создаются формы, и какие там есть поля, можно посмотреть . Создадим файл test.html :</p><p> <html> <head> <meta charset="utf-8"/> </head> <body> <form action="action.php"> Имя: <input type="text" name="name" value=""/> Фамилия: <input type="text" name="surname" value=""/> <input type="submit" name="start" value="Запустить сценарий"/> </form> </body> </html> </p><p>Обращаю ваше внимание, что файл action.php (в нашем случае) должен находиться в одной папке с файлом test.html . Тут можно указывать как относительные, так и абсолютные пути. Будьте внимательны, многие ошибки связаны с неправильным указанием пути до скрипта-обработчика формы.</p> <p>Создадим файл action.php со следующим содержимым:</p><p> <?php echo "Данные из строки браузера: $_SERVER"; ?> </p><p>Если мы сейчас откроем файл test.html , заполним поля формы и нажмём на кнопку, то попадём в файл action.php , где будет выведено сообщение. В данном случае браузер обращается к скрипту action.php и передает ему, через знак "?" все значения атрибутов name , расположенных внутри тегов <input> , разделенных символом & . Обратите внимание, что подставляется вместо $_SERVER .</p> <p>Нашу задачу мы можем решить, разобрав строку QUERY_STRING с помощью стандартных функций по работе со строками в PHP, но лучше воспользоваться другим механизмом — это использование массива $_REQUEST . Все данные, которые получены из полей формы, PHP помещает в массив $_REQUEST, не зависимо от того, каким способом были переданы данные: POST или GET (узнать можно через $_SERVER["REQUEST_METHOD"] ). Напоминаю чем эти способы отличаются:</p> <p>Метод GET является открытым, метод POST является закрытым, т.е. они отличаются способом передачи параметров. Пример:</p><p>1) Если мы используем метод post: mysite.ru/request.php.<br> 2) Если мы используем метод get: mysite.ru/request.php?myname=»Alex»&surname=»Gulynin».<br></p> <p>Также, помимо массива $_REQUEST, PHP создаёт массивы $_GET и $_POST . Давайте теперь реализуем нашу задачу, на основе полученных знаний:</p><p> <?php echo "Добро пожаловать, ".$_REQUEST["surname"]." ".$_REQUEST["name"]; //В квадратных скобках передаётся атрибут name текстового поля?> </p><p>Если мы сейчас заполним форму и нажмём на кнопку, то увидим, что скрипт action.php приветствует нас по фамилии и имени. Всё работает корректно.</p> <p>Здесь всё хорошо, но если мы изменим название скрипта, то нужно будет вносить изменения в файл test.html . Давайте модифицируем файл action.php, так, чтобы, обращаясь к нему либо выводилась форма, когда мы ничего не отправили, либо приветствие, когда мы нажали кнопку:</p><p> <html> <head> <meta charset="utf-8"/> </head> <body> <?php if (!isset($_REQUEST["start"])) {?> <form action="<?=$_SERVER["SCRIPT_NAME"]?>"> Имя: <input type="text" name="name" value=""/> Фамилия: <input type="text" name="surname" value=""/> <input type="submit" name="start" value="Запустить сценарий"/> </form> <?php} else { echo "Добро пожаловать, $_REQUEST["surname"] $_REQUEST["name"]"; } }?> </body> </html> </p><p>Теперь мы не зависим от имени скрипта, т.к. задаем его через переменную окружения $_SERVER["SCRIPT_NAME"] . Конструкция =$_SERVER["SCRIPT_NAME"]?> равнозначна конструкции <span><?php echo $_SERVER["SCRIPT_NAME"]??></span>.<br> Помимо переменной окружения SCRIPT_NAME существует множество других.</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy>");</script> </div> <div class="col-sm-4"> <aside> <p class="h2 bold"> Реклама </p> <div class="line"></div> <div id="vagize2" style="height:500px;width:300px;" align="center"></div> <div class="subscribe block"> <p class="h2 bold"> Подпишитесь на новости </p> <div class="line"></div> <form class="form-horizontal form" action="/" method="post" target="popupwindow"> <div class="group"> <div class="input"> <input type="text" name="subscribe_email" class="form-control" placeholder="Введите e-mail" /> <div class="helper"></div> </div> </div> <div class="group"> <input type="submit" class="btn btn-base btn-big" value="Подписаться на новости" /> </div> </form> </div> <div class="adv block"> <div class="adv_track" data-id="aside"> <div class="adv_block adsense_3"> </div> </div> </div> </aside> </div> </div> </article> <script type='text/javascript' src='https://erfa.ru/wp-content/plugins/akismet/_inc/form.js?ver=3.0.3'></script> <script type='text/javascript' src='https://erfa.ru/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.51.0-2014.06.20'></script> <script type='text/javascript' src='https://erfa.ru/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.0.2'></script> <script type='text/javascript' src='https://erfa.ru/wp-content/plugins/light/js/jquery.fancybox.pack.js?ver=4.3.14'></script> <script type='text/javascript' src='https://erfa.ru/wp-content/plugins/light/js/light.js?ver=4.3.14'></script> <footer> <div class="footer"> <div class="row"> <div class="menu"> <nav class="navbar navbar-moto-footer"> <div class="row"> <div class="container-fluid"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bottom_menu" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> </div> <div class="collapse navbar-collapse" id="bottom_menu"> <ul id="menu-footer" class="nav navbar-nav navbar-first"> <li><a href="/category/ntv-plus/">НТВ плюс</a></li> <li><a href="/category/tricolor/">Триколор</a></li> <li><a href="/category/smart-tv/">Смарт ТВ</a></li> <li><a href="/category/tv/">Телевизор</a></li> </ul> </div> </div> </div> </nav> </div> <div class="to_top"> <div class="top_btn"> <i class="fa fa-angle-up"></i> </div> </div> </div> <div class="row"> <div class="col-sm-6"> © 2024 <span class="bold">erfa.ru</span> - Все о телевидении. </div> <div class="col-sm-6 text-right social_block" itemscope itemtype="http://schema.org/Organization"> <link itemprop="url" href="/" /> <a itemprop="sameAs" href="https://www.facebook.com/sharer/sharer.php?u=https://erfa.ru/html-formy-php-i-formy.html"> <i class="fa fa-facebook"></i> </a> <a itemprop="sameAs" href="https://vk.com/share.php?url=https://erfa.ru/html-formy-php-i-formy.html"> <i class="fa fa-vk"></i> </a> <a itemprop="sameAs" href="https://www.twitter.com/share?url=https://erfa.ru/html-formy-php-i-formy.html"> <i class="fa fa-twitter"></i> </a> <a itemprop="sameAs" href="https://connect.ok.ru/offer?url=https://erfa.ru/html-formy-php-i-formy.html"> <i class="fa fa-odnoklassniki"></i> </a> <a itemprop="sameAs" href=""> <i class="fa fa-google-plus"></i> </a> </div> </div> </div> </footer> </div> </div> </div> </body> </html> </div> </div><script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>