Створюємо форму зворотного зв'язку на PHP. PHP _SELF в атрибуті форми action

У цьому уроці 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. Операції порівняння: більше > , менше< , больше или равно >= , менше чи одно

Завдання: Нехай необхідно створити список, що випадає, з роками з 2000 по 2050.
Рішення: Необхідно створити HTML форму з елементом SELECT та PHP – сценарій для обробки форми.

Обговорення:

Для початку створимо два файли: form.html і action.php. У файлі form.html буде міститися html-форма з списком, що випадає. Причому значення у списку можна вказати двома способами:

I. Введення даних вручну:


2000
2001
2002
……………………………………………
2050

ІІ. Введення даних через цикл:



Як видно, другий приклад із циклом, більш компактний. Думаю, не варто наводити скрипт оброблювача даної форми, тому що він обробляється так само як текстове поле, тобто. значення списку можна отримати з суперглобального масиву $_POST.

Опис:

Створимо HTML-форму для надсилання файлу на сервер.




У даній html-формі є елемент browse, який відкриває діалогове вікно, щоб вибрати файл для завантаження на сервер. При натисканні на кнопку "Передати файл"файл передається сценарію-обробнику.

Потім необхідно написати сценарій обробник action.php. Перед написанням обробника необхідно визначитися в який каталог ми копіювати файл:

Зауваження

Якщо ви довіряєте користувачам закачувати на сервер будь-які файли, потрібно бути гранично обережним. Зловмисники можуть впровадити "нехороший" код у картинку або файл і відправити на сервер. У таких випадках необхідно жорстко контролювати завантаження файлів.

Даний приклад демонструє створення каталогу та копіювання файлу до цього каталогу на сервер.

Також хотів би продемонструвати приклад із елементом checkbox. Цей елемент трохи відрізняється від інших елементів тим, що якщо не один із елементів checkboxЯ не обраний, то суперглобальна змінна $_POSTповерне порожнє значення:


Синій
Чорний
Білий




Є ще питання чи щось незрозуміло - ласкаво просимо на наш

Однією з найбільш часто зустрічаються практично завдань є реалізація форми зворотний зв'язок. Тобто написання її HTML коду, оформлення її на CSS, створення PHP скрипту, який би обробляв отримані від користувача дані і відправляв їх на нашу пошту, написання JS скрипта, який би перевіряв форму на адекватність даних, що вводяться, захист нашого дітища від спаму, щоб наш поштова скринька не обвалилася від атак ботів.

Всі перелічені вище моменти будуть розглянуті в нашому огляді і детально прокоментовані.

Отже, починаємо створення форми зворотного зв'язку:

HTML

Насамперед ми пишемо HTML код, у ньому задаються поля, які заповнюватиме користувач. Вони ж надалі оформлятимуться. Код форми виглядає так:

< form method= "post" action= "mail.php" > < div class = "left" > < label for = "name" >Ім'я:< input maxlength= "30" type= "text" name= "name" /> < label for = "phone" >Телефон:< input maxlength= "30" type= "text" name= "phone" /> < label for = "mail" >E-mail:< input maxlength= "30" type= "text" name= "mail" /> < div class = "right" > < label for = "message" >Повідомлення:< textarea rows= "7" cols= "50" name= "message" > < input type= "submit" value= "Відправити" />

І візуально вона виглядає зараз так:

Згоден, поки що все негарно і нічого не зрозуміло, але ми тільки почали.

Розглянемо наведений вище код докладно:

  • < form method= "post" action= "mail.php" > …


    Для того, щоб створити форму, необхідно використовувати тег form. Саме він визначає початок та кінець форми для інтерпретатора коду. У нього, як і у будь-якого тега, є цілий набір атрибутів, але обов'язкових для роботи форми всього два, це method (метод відправки запиту на сервер, для форм стандартно використовують post) і action (вказує шлях до файлу-оброблювача форми, саме в цьому файлі буде міститися скрипт на PHP, який після відправлятиме введені користувачем значення нам на пошту, в нашому випадку ми бачимо, що це файл називається mail.php і лежить він у тому ж директорії сайту, що і сторінка, що розглядається нами).
  • < input maxlength= "30" type= "text" name= "name" />


    Далі у нас йдуть інпути. Це власне самі поля форми, у які користувачі будуть вводити необхідну нам інформацію (type="text" говорить про те, що це буде текст). Атрибут maxlength вказує скільки символів може ввести користувач у поле форми. Найважливіший атрибут – це name – він задає ім'я конкретного поля. Саме за цими іменами надалі PHP скрипт оброблятиме інформацію, що надходить до нього. За бажання можна ще задати атрибут placeholder, який виводить усередині поля текст, що зникає при встановленні курсору всередині неї. Однією із проблем плейсхолдера є те, що він не підтримується деякими старими браузерами.
  • < label for = "name" >Ім'я:


    Використовується якщо ми відмовилися від плейсхолдерів. Звичайна підпис поля, атрибут for повідомляє якого конкретно полю відноситься даний підпис. Значенням вказується name поля, що цікавить нас.
  • < textarea rows= "7" cols= "50" name= "message" >


    Так само, як і інпут призначений для введення користувачем інформації, тільки цього разу поле заточене для довгих повідомлень. Rows вказує розмір поля у рядках, cols у символах. Загалом вони задають висоту та ширину нашого поля.
  • < input type= "submit" value= "Відправити" />


    Про те, що це кнопка для відправки форми, нам повідомляє type="submit", а value задає текст, який буде всередині цієї кнопки.
  • < div class = "right" >


    використані лише для подальшого візуального оформлення форми.
CSS

Для того щоб наша форма зворотного зв'язку виглядала презентабельно її потрібно оформити. Для отримання наступного результату:

Ми використовували цей код:

form ( background: #f4f5f7; padding: 20px; ) form . left, form . right ( display: inline- block; vertical- align: top; width: 458px; ) form . right ( padding- left: 20px; ) label ( display: block; font- size: 18px; text- align: center; margin: 10px 0px 0px 0px; ) input, textarea ( border: 1px solid #82858D; pad font- size: 16px; width: 436px; ) textarea ( height: 98px; margin- bottom: 32px; ) input[ type= "submit" ] ( width: 200px; float: right; border: none; background: #595 color: #fff;text-transform: uppercase; )

Докладно розписувати CSS я не бачу сенсу, зверну Вашу увагу лише на ключові моменти:

  • Не варто писати оформлення під кожний тег у формі. Намагайтеся будувати свої селектори так, щоб парою рядків коду оформляти всі необхідні елементи.
  • Не використовуйте для перенесення рядків та створення відступів зайві теги за типом< br>, < p>і тд, з цими завданнями чудово справляється CSS із властивістю display: block і margin із padding. Більше того, чому не варто користуватися< br>у верстці взагалі можете почитати у статті Тег br, а чи так він потрібен? .
  • Не варто користуватися табличною версткою для форм. Це суперечить семантиці цього тегу, а пошукові системи люблять семантичний код. Для того, щоб формувати візуальну структуру документа, нам достатньо тегів div, і заданих ним у CSS властивостей display: inline-block (вибудовує блоки в ряд) і vertical-align: top (не дає їм розбігтися по екрану), задаємо їм необхідну висоту і вуаля, нічого зайвого і все так, як нам потрібно.
  • Для бажаючих заощаджувати свій час на оформленні сайтів можу порадити користуватися CSS фреймворками під час створення сайтів, особливо самописних. Мій вибір у цьому плані - Twitter Bootstrap. Урок з оформлення форм з його використанням можна переглянути.

    PHP

    Ну ось і настав час зробити нашу форму працездатною.

    Заходимо до нашого кореневого каталогу сайту і створюємо там файл mail.php, до якого ми раніше вказували шлях в атрибуті action тега form.

    Зрештою його код виглядатиме так:

    Ваше повідомлення успішно надіслано

    Обговорення HTML та CSS частини цього документа можна пропустити. За своєю суттю це звичайна сторінка сайту, яку Ви можете оформити за своїм бажанням та потребою. Розглянемо найважливішу її частину – PHP скрипт обробки форми:

    $back = "

    Повернутися назад

    " ;

    Цим рядком ми створюємо посилання для повернення на попередню сторінку. Оскільки ми заздалегідь не знаємо з якої сторінки користувач потрапить на цю, робиться це за допомогою маленької JS функції. Надалі ми просто звертатимемося до цієї змінної для виведення її у потрібних нам місцях.

    if (! empty ($_POST [ "name" ] ) and ! empty ($_POST [ "phone" ] ) and ! empty ($_POST [ "mail" ] ) and ! empty ($_POST [ "message" ] ) )) ( //внутрішня частина обробника ) else ( echo "Для відправки повідомлення заповніть всі поля! $ back " ; exit ; )

    Тут ми прикручуємо перевірку форми на заповнення полів. Як ви здогадалися, у частині $_POST["name"] у лапках ми пишемо значення атрибуту name наших інпутів.

    Якщо всі поля заповнені, то скрипт почне обробляти дані у своїй внутрішній частині, якщо хоч одне поле не було заповнене, то на екран користувача виведеться повідомлення з вимогою заповнити всі поля форми echo "Для відправки повідомлення заповніть всі поля! $back" та посиланням для повернення на попередню сторінку, яку ми створили найпершим рядком.

    Далі вставляємо у внутрішню частину обробника форми:

    $name = trim (strip_tags ($_POST ["name"])); $phone = trim (strip_tags ($_POST ["phone"])); $mail = trim (strip_tags ($_POST ["mail"])); $message = trim (strip_tags ($_POST ["message"]));

    Таким чином ми очистили дані, що вводяться користувачем, від html тегів і зайвих прогалин. Це дозволяє нам убезпечити себе від отримання шкідливого коду у надісланих нам повідомленнях.

    Перевірки можна й ускладнити, але це вже за вашим бажанням. Мінімальний захист на серверній стороні ми вже встановили. Подальше ми зробимо на стороні клієнта, використовуючи JS.

    Повністю відмовлятися від захисту форми на серверній стороні на користь JS не рекомендую, оскільки хоч і вкрай рідко, але трапляються унікуми з відключеним у браузері JS.

    Після чищення тегів додаємо відправлення повідомлення:

    mail ("пошта_для_отримання_повідомлень@gmail.com" , "Лист з адреси_вашого_сайту" , "Вам написав: " . $name . "
    Його номер: ". $phone."
    Його пошта: ". $mail."
    Його повідомлення: " . $message , "Content-type:text/html;charset=windows-1251" ) ;

    Саме цей рядок і займається формуванням та надсиланням повідомлення до нас. Заповнюється вона так:

  • "пошта_для_отримання_повідомлень@gmail.com" – сюди між лапок вставляєте свою пошту
  • "Лист з адреси_вашого_сайту" – це тема повідомлення, яке надходитиме на пошту. Можна написати сюди будь-що.
  • "Вам написав: ".$name."< br />Його номер: ".$phone."< br />Його пошта: ".$mail."< br />Його повідомлення: ".$message – формуємо сам текст повідомлення. $name – вставляємо інформацію заповнену користувачем через звернення до полів з попереднього кроку, в лапках описуємо що це поле, тегом< br />робимо перенесення рядка, щоб повідомлення загалом було читальним.
  • Content-type:text/html;charset=windows-1251 - в кінці йде явна вказівка ​​типу даних, що передається в повідомленні та його кодування.
  • ВАЖЛИВО!

    Кодування вказане у «голові» документа (< meta http- equiv= "Content-Type" content= "text/html; charset=windows-1251" />), кодування з повідомлення Content-type:text/html;charset=windows-1251 і в цілому кодування файлу PHP повинні збігатися інакше в повідомленнях, що одержуються на пошту, замість російських або англійських букв будуть виводитися «кракозябри».

    Багато хто не вказує кодування повідомлення, що надсилається явно, але на деяких поштових клієнтах через це надалі можуть виникнути проблеми (на пошту приходять нечитабельні листи), тому я рекомендую її все-таки вказувати.

    Перевірка форми на адекватність даних, що вводяться

    Щоб користувачі по неуважності не промахувалися полями і заповнювали все коректно варто поставити перевірку даних, що вводяться.

    Це можна зробити як на PHP на стороні сервера, так і на JS на стороні клієнта. Я використовую другий варіант, оскільки так людина відразу може дізнатися, що вона зробила не вірно і виправити помилку не роблячи додаткових переходів по сторінках.

    Код скрипта вставляємо в тому ж файлі, де у нас розміщується HTML частина форми. Для нашого випадку він виглядатиме так:

    < script>function checkForm(form) ( var name = form. name. ) ;if (! n) ( alert("Ім'я введено неправильно, будь ласка виправте помилку" ) ; return false ; ) var phone = form. 0 - 9 - ] * [ 0 - 9 - ] + $/ ) , if (! p) ( alert("Телефон введено неправильно" ) ; return false ; ) 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)" >

    Тепер за пунктами забираємо склад перевірки:


    Як можете помітити така міні-перевірка пишеться для кожного нашого поля. Перевірку на одне поле я виділив на скріншоті червоним квадратом, в інших полів вона має аналогічну структуру і якщо виникне потреба додати поле або прибрати його, Ви тепер легко зможете це зробити.

    У статті докладно йдеться про використання змінної PHP _SELF.

    Що за змінна PHP _SELF?

    Змінна PHP _SELF повертає ім'я та шлях до поточного файлу (щодо кореня документа). Ви можете використовувати цю змінну в атрибуті форми action. Існують також деякі нюанси, які ви маєте знати. Ми, звичайно, ніяк не можемо обминути ці нюанси.

    Давайте розглянемо кілька прикладів.

    Echo $_SERVER["PHP_SELF"];

    1) Припустимо, що ваш php файл розташований за наступною адресою:

    http://www.yourserver.com/form-action.php

    У цьому випадку змінна PHP _SELF міститиме:

    "/form-action.php"

    2) Припустимо, ваш php файл розташований за такою адресою:

    http://www.yourserver.com/dir1/form-action.php

    PHP _SELF буде:

    "/dir1/form-action.php"

    PHP _SELF в атрибуті форми action. Навіщо вона там знадобилася?

    Зазвичай змінну PHP _SELF використовують у атрибуті action тега form . В атрибуті action вказується адреса, за якою буде надіслано зміст форми після підтвердження (клік користувачем по кнопці з type="submit"). Як правило це та сама сторінка, з якої пішла форма.

    Однак, якщо ви перейменуєте файл, на який посилається форма, вам знадобиться перейменувати назву файлу в атрибуті action, інакше форма не працюватиме.

    Змінна PHP _SELF позбавить вас зайвих виправлень, оскільки адреса сторінки буде генеруватися автоматично, виходячи з назви файлу.

    Допустимо, у вас є файл з формою form-action.php, і ви хочете, щоб після підтвердження форма відправлялася на той самий файл. Зазвичай пишуть так:

    Але ви можете використовувати змінну PHP _SELF замість form-action.php. У цьому випадку код виглядатиме: