Формы html в php. PHP сценарии обработки HTML форм

Ни для кого не является секретом, что наиболее распространенным способом взаимодействия html-страницы с сайтом является форма. Форма (то есть, html-элемент образуемый тегом form) используется и бесплатными почтовыми службами, электронными магазинами и многими другими типами сайтов.

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

Рассмотрим подробнее варианты для разных типов полей.

Текстовые поля

Под текстовыми полями в этой статье понимаются элементы, создаваемые тегам input со значением параметра type равным text и тегом textarea . Организовать обработку формы состоящей из нескольких таких полей проще всего. На листинге ниже приведен листинг с html-разметкой для такой формы.






Как видно из листинга, имена для элементов формы, с точки зрения PHP , являются элементами массива. Поэтому PHP -сценарий, который будет обрабатывать эту форму, будет воспринимать все множество текстовых полей этой формы как единый массив. К отдельным элементам можно обращаться по индексам или использовать перечисление при помощи команд list и each , как это сделано в следующем примере.

n"; ?>

Переключатели

Переключателями (checkbox ) в этой статье называются элементы, создаваемые тегам input со значением параметра type равным checkbox . Форма для использования переменного количества «переключателей » строится абсолютно так же. Обратите внимание, что выбор конкретного значения переключателя (то есть значение свойства value) не важен. Пример приведен в листинге ниже:






Однако обработка такой формы отличается от обработки, описанной для текстовых полей. В данном случае необходимо определить, включил или нет посетитель сайта тот или иной переключатель. Если включил — то соответствующий элемент массива существует, если нет — то отсутствует. В следующем листинге приведен пример PHP сценария, который распечатывает включенные переключатели:

Радио-кнопки

Перед тем как описывать обработку радио-кнопок необходимо вспомнить, как они работают. Суть радио-кнопок (элементы созданные тегами input со значением параметра type равным radio ) заключается в том что, выбирая одну кнопку, пользователь автоматически снимает выделение с другой кнопки из этого же набора. Кнопки объединяются в набор очень просто: у всех кнопок в наборе одно и тоже имя.

А вот значения (то есть параметры value ) у кнопок в наборе — разные. И на сайт будет отправлено значение выбранной кнопки с именем набора. Так же как и в случае с текстовыми полями и переключателями имена наборов радио-кнопок должны оформляться как имена элементов массива в PHP. Пример такой формы приведен в следующем листинге:

// первый набор кнопок
// второй набор кнопок
// третий набор кнопок

Обработка радио-кнопок объединяет идеи, использование при обработке, как текстовых полей, так и переключателей. Если автор html-страницы не установил значение по умолчанию, а пользователь не выбрал определенную кнопку в наборе радио-кнопок, то данный элемент будет отсутствовать в массиве (как для переключателей).

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

n"; ?>

Таким образом, ничего сложного в обработке сложных форм нет.

В этом уроке PHP рассматриваются базовые понятия языка: обработка форм с отправкой запроса в веб-страницы, основные управляющие конструкции php при обработке форм, запись данных из формы PHP в файл, функция даты в PHP date().

1. Напомним, что все файлы php тестируются только при запущенном Денвере и только из адресной строки браузера. Запускать файлы php двойным щелчком нельзя!

2. Запустите Денвер.

Упражнение 1. Обработка простой формы

В данном уроке 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

Упражнение 2. Создание калькулятора для формы «Автозапчасти от Боба»

В этом уроке 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

Упражнение 3. Запись данных из формы в текстовый файл

В нашем уроке PHP также рассматриваем запись данных из формы в текстовый файл и функцию даты date() при обработке формы.

1. В файле-обработчике формы «Автозапчасти об Боба» после последней закрывающей фигурной скобки добавьте код.

Рисунок 3.9

2. Проверьте работу программы. Текстовый файл orders.txt создается автоматически, просмотрите его содержимое.

КОНТРОЛЬНОЕ ЗАДАНИЕ

После изучения данного урока PHP предлагается выполнить контрольное задание для закрепления полученных знаний.

Рисунок 3.10

1. Создать форму, как на рис. 3.10.

2. Создать обработку формы, которая будет выводить результаты заказа, как на рис. 3.11 (результаты будут отличаться в зависимости от введенных в форму данных.

3. Результаты заказа должны записываться в отдельный текстовый файл.

Список заказа должен отражать следующее:

  • Вид товара.
  • Стоимость 1 шт. товара.
  • Количество заказанных товаров.
  • Общую стоимость заказа без доставки, налога на продажи и скидок.
  • Стоимость доставки.
  • Величину налога с продажи.
  • Скидку в процентах и рублях.
  • Стоимость заказа с учетом доставки, налога с продаж и скидки.
  • Адрес доставки.

Условия задачи:

  1. Стоимость товаров:
    • ручки - 10 руб.
    • книги - 100 руб.
    • сувенира - 1000 руб.
    • компьютера - 10000 руб.
  2. Налог с продаж - 18%. Налог прибавляется к общей стоимости всех товаров с учетом скидки.
  3. Стоимость доставки - 500 руб. Стоимость доставки прибавляется к общей стоимости всех товаров в учетом скидки и налога с продаж.
  4. Скидки:
    • При заказе ручек или книг меньше 5 шт. скидка - 5%, от 5 до 10 шт. - 10%, выше 10 шт. - 20%;
    • При заказе сувениров или компьютеров от 10 до 20 шт. скидка - 10%, от 20 до 30 шт. - 20%, выше 30 шт. - 40%.

Сегодня будем работать над созданием красивой HTML формы обратной связи для сайта, работающей на PHP и имеющею встроенную защиту от спама. Никаких особых знаний вам не потребуется, достаточно будет основ html и элементарной логики. Я дам готовые файлы, которые вы сможете вставить на сайт без изменений или скорректировать под свои нужды.

Недавно я делал статью о том, как сделать с помощью плагина Contact Form 7. Также просто можно сделать форму обратной связи на Joomla и других популярных CMS.

Но, что делать сайтам, которые не используют популярные CMS? – Остается делать все руками.

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

Заказать установку и настройку готовой формы за 500 рублей можно здесь (это для тех кому лень руками поработать или навыка недостаточно).

Принцип работы формы обратной связи на html

Наша форма будет иметь 5 полей для ввода данных – имя, электронный адрес, телефон, адрес сайта, текст сообщения (вы сможете удалить или изменить их самостоятельно).

Все поля, кроме адреса веб сайта будут обязательны для заполнения (это вы тоже сможете настроить самостоятельно).

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

Конечная форма связи будет иметь вот такой вид:


Для работы контактной формы, созданной на html, требуется 3 элемента.

Первый отвечает за структуру самой формы, за тип и количество полей ввода данных. Это обычный html код.

Второй отвечает за обработку данных, которые пользователь вводит в поля формы. Он определяет, что, куда и в каком виде пересылать, после того, как будет нажата кнопка отправки сообщения. Для реализации используется специальный PHP скрипт.

Третий отвечает за внешний вид. Устанавливает размеры и расположение полей ввода данных, добавляет различные цвета и эффекты. Это все задается CSS стилями.

Демо версия формы

Настройку каждого из этих элементов мы с вами разберем по шагам.

Создание HTML макета

Чтобы не делать статью слишком длинной и не добавлять отдельно каждый элемент, я приведу полный html код, а ниже опишу каждый блок и возможные изменения.

Для обозначения форм в html используется тег

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

Правильный формат "[email protected]"

Правильный формат "+7-123-4567890"

Правильный формат "http://someaddress.com"

"Введите ваше имя" required />

"Введите электронный адрес" required />

"Введите номер телефона" required />

Правильный формат "+7-123-4567890"

"Введите адрес вашего сайта" pattern = "(http|https)://.+" />

Правильный формат "http://someaddress.com"

Начнем с первой строки.

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

Поля для ввода самого сообщения размечается тегом