Form html виведення даних PHP. Найпростіша форма надсилання даних на пошту за допомогою HTML та PHP
Щоб організувати передачу даних на сервер за допомогою форми, потрібно реалізувати HTML форму, в яку відвідувачі сайту будуть вводити свою інформацію та код PHP, призначення якого в прийнятті та обробці отриманих даних на сервері.
HTML форма відправлення даних
Форма на сторінці формується тегами
, всередині яких містяться теги полів для введення текстової інформації, теги спеціальних компонентів (наприклад, поле зі списком), теги для поля вибору та завантаження файлу .* Для HTML5 також існує можливість розміщувати теги полів форми не всередині тегів форми, а в будь-якому місці на сторінці. При цьому для кожного такого поля потрібно вказувати атрибут "form", щоб визначити з якою формою надсилання він повинен взаємодіяти.
Отже, найпростіша форма відправки може містити такий код:
Елементи форми та їх параметри:
action="myform.php"– атрибут "action" визначає, який php-файл буде обробляти дані, що відправляються. У цьому прикладі дані будуть відправлені у файл "myform.php", що знаходиться в тій же директорії що і сторінка з формою. Якщо цей атрибут не вказати явно, ці форми будуть надіслані на адресу сторінки самої форми.
method="post"– method визначає метод передачі даних POST або GET. Докладніше про це у статті "Відмінності методів POST або GET". Якщо не вказувати атрибут явно, за умовчанням використовуватиметься метод GET.
Текст "Значення А:"і "Значення Б:"доданий тільки з метою оформлення та зрозумілості форми для користувача. Додавати це передачі даних не обов'язково, але для того, щоб користувачеві стало зрозуміло, що вводити, варто вказувати.
Теги використовуються для формування різних керуючих елементів форми.
type="text"– атрибут "type" визначає вигляд поля. Залежно від того, який тип зазначений, змінюється та зовнішній вигляделемента та його призначення. Значення атрибута "text" вказує, що в браузері елемент відображатиметься однорядковим текстовим полем, куди користувач зможе ввести рядок.
name="data1"– атрибут "name", вказує ім'я, вірніше індекс даних у масиві, отриманих сервером. Це обов'язковий параметр, за яким у php-обробнику можна буде отримати доступ переданому значенню. Ім'я може бути обране довільно, проте, зручніше, коли це значення має якийсь зрозумілий зміст.
type="submit"- Тег з таким значенням параметра "type" відображатиметься на сторінці як кнопка. Насправді на формі можна обійтися без кнопки. Якщо, наприклад, у формі є текстові поля, відправку можна здійснити, просто натиснувши "Введення" на клавіатурі. Але наявність кнопки робить форму зрозумілішою.
value="Надіслати" !}– у цьому випадку (для type="submit") визначає лише напис на кнопці. Для type="text", наприклад, це буде текст, який буде виведено у текстовому полі.
У результаті, на сторінці цей код виглядатиме приблизно так:
За натисканням на кнопку буде виконано відправлення даних на вказану сторінку, і якщо вона існує і коректно працює, дані будуть оброблені.
Обробка відправлених HTML формою даних у PHP
Відправлені описаним способом дані, що містяться в суперглобальні масиви $_POST, $_GET і $_REQUEST. $_POST або $_GET міститимуть дані в залежності від того, яким методом здійснювалося відправлення. $_REQUEST містить надіслані дані будь-яким із зазначених методів.
$_POST, $_GET і $_REQUEST – це асоціативні масиви, поля-індекси яких збігаються з атрибутами "name" тегів . Відповідно, для роботи з даними у файлі myform.php можна присвоїти змінним значення елементів такого масиву вказавши як індекс ім'я поля:
// для методу GET
$a = $_GET[ "data1"];
$b = $_GET[ "data2"];
// для методу POST
$a = $_POST[ "data1"];
$b = $_POST[ "data2"];
// за будь-якого методу
$a = $_REQUEST[ "data1"];
$b = $_REQUEST[ "data2"];
Перевірка заповнення полів форми
Іноді при отриманні даних потрібно перевірити, чи користувач не відправив порожню форму. Для цього можна використовувати функцію empty.
if (empty ($_REQUEST["data1" ])) (
echo "Поле не заповнене";
} else (
echo "Поле було заповнено";
$a = $_REQUEST[ "data1"];
}
Зазвичай цього рішення достатньо. Якщо потрібно вводити текст, то буде зрозуміло, чи введений він чи ні. Однак, якщо користувач навмисно для обчислень введе нуль, то функція empty покаже, що значення немає. Тому для таких ситуацій краще використовувати функцію isset. Вона явно перевірятиме, чи задане значення чи ні.
if (isset ($_REQUEST["data1"])) (
echo "Поле було заповнено";
$a = $_REQUEST[ "data1"];
} else (
echo "Поле не заповнене";
}
Однією з найбільш часто зустрічаються практично завдань є реалізація форми зворотний зв'язок. Тобто написання її 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.
Зрештою його код виглядатиме так:
Його номер: ". $phone."
Його пошта: " . $mail . "
Його повідомлення: ". $ message,); echo "Ваше повідомлення успішно надіслано!
Ви отримаєте відповідь найближчим часом
$back "; exit; ) else ( echo ; exit ; ) ?>
Обговорення HTML та CSS частини цього документа можна пропустити. За своєю суттю це звичайна сторінка сайту, яку Ви можете оформити за своїм бажанням та потребою. Розглянемо найважливішу її частину – PHP скрипт обробки форми:
$back = "
\"javascript: history.back()\" >Повернутись назад
" ;Цим рядком ми створюємо посилання для повернення на попередню сторінку. Оскільки ми заздалегідь не знаємо з якої сторінки користувач потрапить на цю, робиться це за допомогою маленької JS функції. Надалі ми просто звертатимемося до цієї змінної для виведення її у потрібних нам місцях.
if (! empty ($_POST [ "name" ] ) and ! empty ($_POST [ "phone" ] ) and ! empty ($_POST [ "mail" ] ) and ! empty ($_POST [ "message" ] ) )) ( //Внутрішня частина оброблювача) else ( echo "Для надсилання повідомлення заповніть усі поля! $back "; exit; )
Тут ми прикручуємо перевірку форми на заповнення полів. Як ви здогадалися, у частині $_POST["name"] у лапках ми пишемо значення атрибуту name наших інпутів.
Якщо всі поля заповнені, то скрипт почне обробляти дані у своїй внутрішній частині, якщо хоч одне поле не було заповнене, то на екран користувача виведеться повідомлення з вимогою заповнити всі поля форми echo "Для відправки повідомлення заповніть всі поля! $back" та посиланням для повернення на попередню сторінку, яку ми створили найпершим рядком.
Далі вставляємо у внутрішню частину обробника форми:
$name = trim (strip_tags ($_POST ["name"])); $phone = trim (strip_tags ($_POST ["phone"])); $mail = trim (strip_tags ($_POST ["mail"])); $message = trim (strip_tags ($_POST ["message"]));
Таким чином ми очистили дані, що вводяться користувачем, від html тегів і зайвих прогалин. Це дозволяє нам убезпечити себе від отримання шкідливого коду у надісланих нам повідомленнях.
Перевірки можна й ускладнити, але це вже за вашим бажанням. Мінімальний захист на серверній стороні ми вже встановили. Подальше ми зробимо на стороні клієнта, використовуючи JS.
Повністю відмовлятися від захисту форми на серверній стороні на користь JS не рекомендую, оскільки хоч і вкрай рідко, але трапляються унікуми з відключеним у браузері JS.
Після чищення тегів додаємо відправлення повідомлення:
mail ( "пошта_для_отримання_повідомлень@gmail.com",
"Лист із адреси_вашого_сайту", " Вам написав: " . $name. "
Його номер: ". $phone."
Його пошта: " . $mail . "
Його повідомлення: ". $message , "Content-type:text/html;charset=windows-1251")
;
Саме цей рядок і займається формуванням та надсиланням повідомлення до нас. Заповнюється вона так:
- "пошта_для_отримання_повідомлень@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. phone. value; var p = phone. match(/^[0-9+][0-9-]*[0-9-]+$/); if (! p) (alert ( "Телефон введено неправильно"); return false; ) var mail = form. mail. value; var m = mail. match(/ ^[ A- Za- z0- 9 ] [ A- Za- z0- 9 \. _- ] * [ A- Za- z0- 9 _] *@ ([ A- Za- z0- 9 ] + ([A-Za-z0-9-] * [A-Za-z0-9] +) * \.) + [A-Za-z] + $/); if (! m) (alert ( "E-mail введено неправильно, будь ласка, виправте помилку"); return false; ) return true ; )
Ну а тепер звичайний розбір:
Для того, щоб при натисканні на кнопку відправлення форми, у нас відбувалася її перевіркавішаємо запуск нашого скрипта на тег form:
< form method= "post" action= "mail.php" onSubmit= "return checkForm(this)" >
Тепер за пунктами забираємо склад перевірки:
Як можете помітити така міні-перевірка пишеться для кожного нашого поля. Перевірку на одне поле я виділив на скріншоті червоним квадратом, в інших полів вона має аналогічну структуру і якщо виникне потреба додати поле або прибрати його, Ви тепер легко зможете це зробити.
Інтерактивні сайти беруть введення від користувачів. Один із поширених способів отримання введення - форми.
У цьому уроці подивимося, як створити форму та обробити введення на сервері.
У браузері з'явиться форма:
Тепер починається найцікавіше: отримання та обробка даних за допомогою PHP.
Запитування даних форми за допомогою PHP
Якщо вам необхідно запитати дані, надіслані через форму (методом post), ви використовуєте $_POST :
$_POST["fieldname"];
який поверне значення поля форми. Спробуємо це з прикладу.
Спочатку створимо сторінку з формою, як і раніше. Потім створимо РНР-сторінку (обробник) "handler.php" (зверніть увагу, що це ім'я сторінки, яке ми записали в атрибуті actionв нашої
У браузері це буде так:
Тепер використовуємо ці введення для створення сторінки, яка автоматично змінює колір фону на основі вказівок користувача. Це робиться створенням умови (див. Урок), яка використовує дані, введені користувачем у форму.
$strHeading = "
Привіт, " . $_POST["username"] . "
"; switch ($_POST["favoritecolor"]) ( case "r": break; case "g"; break; case "b": break; default: break; ) ?>Фон буде білим, якщо користувач не вкаже у формі кращий колір. Це досягається встановленням значення default(за умовчанням), яке застосовується, якщо жодна з умов не виконана.
Але що буде, якщо користувач не вкаже своє ім'я? Тоді в заголовку буде лише "Привіт,". Створимо додаткову умову зміни цього варіанта.
$strUsername = $_POST["username"]; if ($strUsername != "") ( $strHeading = " Привіт, " . $_POST["username"] . "
";
) else ( $strHeading = " Привіт незнайомцю!
";
}
switch ($_POST["favorite color"]) ( case "r": $strBackgroundColor = "rgb(255,0,0)"; break; case "g"; $strBackgroundColor = "rgb(0,255,0)"; break; case "b": $strBackgroundColor = "rgb(0,0,255)"; break; default: $strBackgroundColor = "rgb(255,255,255)"; break; ) ?>
У наведеному вище прикладі ми використовуємо умови для перевіркиінформації від користувача. В даному випадку не так важливо, якщо користувач не вкаже ім'я. Але оскільки ваш код стає все більш накрученим, життєво важливо, щоб враховувався варіант, коли користувач взагалі не заповнює форми.
Приклад: Форма контактної інформації
Грунтуючись на наявних знаннях про PHP та форми, ви можете створити форму контактної інформації з використанням функції mail, яка має наступний синтаксис:
Mail (куди, суб'єкт, повідомлення);
Спочатку створюємо просту HTML-форму:
Форма контактної інформації
Потім знадобиться РНР-скрипт для відправки введення користувача:
Зауважте, що приклад працює, тільки якщо у вас є доступ до поштового сервера. За замовчуванням це не так у XAMPP та у більшості безкоштовних хостів. Отже, деякі хости можуть вимагати наявності заголовка форми, який виконується з додатковим параметром:
Mail ("Ви@имявашегодомена.com", "Тест", "Це тестове повідомлення", "Від: мені@мойдомен.com");
Одна з найголовніших переваг PHP - те, як він працює з формами HTML. Тут основним є те, що кожен елемент форми автоматично стає доступним вашим програмам на PHP. Для детальної інформації про використання форм у PHP читайте розділ. Ось приклад форми HTML:
Приклад #1 Найпростіша форма HTML
У цій формі немає нічого особливого. Це звичайна форма HTML без спеціальних тегів. Коли користувач заповнить форму та натисне кнопку відправки, буде викликана сторінка action.php . У цьому файлі може бути щось на кшталт:
Приклад #2 Виводимо дані форми
Вітаю,
.
Вамроків.
Приклад виведення цієї програми:
Здрастуйте, Сергію. Вам тридцять років.
Якщо не брати до уваги шматки коду з htmlspecialchars()і (int), принцип роботи цього коду має бути простим і зрозумілим. htmlspecialchars()забезпечує правильне кодування "особливих" HTML-символів так, щоб шкідливий HTML або Javascript не було вставлено на вашу сторінку. Поле age, про яке нам відомо, що воно має бути число, ми можемо просто перетворити на integer, що автоматично позбавить нас небажаних символів. PHP також може зробити це автоматично за допомогою розширення filter. Змінні $_POST["name"] і $_POST["age"] автоматично встановлені для вас засобами PHP. Раніше ми використовували суперглобальну змінну $_SERVER , тут ми так само використовуємо суперглобальну змінну $_POST , яка містить всі POST-дані. Зауважимо, що метод відправлення(method) нашої форми – POST. Якби ми використовували метод GET, то інформація нашої форми була б у суперглобальній змінній $_GET. Крім цього, можна використовувати змінну $_REQUEST, якщо джерело даних не має значення. Ця змінна містить суміш GET, POST, COOKIE.
15 років тому
Відповідно до HTTP specification, ви повинні використовувати метод POST, коли ви "за допомогою форми для зміни статей деякого часу на сервері кінця. Для прикладу, якщо сторінка має форму для доступних користувачів для отримання своїх нових коментарів, як це page here, form should use POST.If you click "Reload" або "Refresh" on page that you reached through a POST, it's always an error - you shouldn't be posting the same comment twice -- which is why ці pages aren"t bookmarked або cached.
Ви повинні використовувати GET метод, коли ваша форма є, добре, щоб отримати деякий час від сервера і не фактично змінюється будь-який. Для прикладу, спосіб для пошуку знаряддя повинен використовувати GET, тому що вивчити веб-сайт повинен не змінювати будь-яку думку, що клієнт може скористатися ним, і bookmarking або caching результати search-engine query є just as useful as bookmarkingor static HTML page.
2 years ago
Worth clarifying:
POST is not more secure than GET.
Відповідь для вибору GET vs POST involve різні factory така, як наслідування доцільності (якщо ви "суміщення"? URL), і як можна зробити, щоб зробити функцію, щоб бути shareable -- наприклад, Google Searchs є Get because it makes it easy to copy and share the search query with someone lose simply by sharing the URL.
Здоров'я є лише розглядом, що робить насправді, що в GET є easier до share than a POST. До прикладу: ви не повинні писати слово, щоб бути в GET, тому що користувач збирається використовувати URL і невідповідно розкривати їхнє слово.
Хоча, GET і POST є еквівалентно приємним для інтерпретації, щоб добре розібратися малих людей, якщо ви не розробляєте TLS/SSL для захисту мережі підключення до неї.
Всі форми мають бути HTTP (зазвичай port 80) є додатковим, і сьогодні (2017), там є багато хороших умов для громадських веб-сайтів, щоб не використовувати HTTPS (який є принципово HTTP + Transport Layer Security).
Як bonus, якщо ви використовуєте TLS ви, мінімізуйте ризик ваших користувачів, щоб отримати код (ADs), вмикається в свій транспорт, що не буде йти там.
В одній із минулих тем вже розглядалося отримання даних із форми. У цій темі я докладніше розповім, як правильно здійснюється відправлення форми на сервер, а також обробка форми PHP.
Відправлення форми
Поле для введення. Найпоширенішими елементами форми є різні поля для введення. Вони створюються за допомогою тега багатьох типів та тега