У сьогоднішній практичній статті ми розглянемо все, що потрібно знати початківцям про HTML форми в PHP. Тут ви знайдете докладну інформацію про форми: основи використання, компоненти форми, обробку помилок за допомогою PHP, а також вихідний код повністю робочої форми.
Основи використання форм в PHP
Якщо ви вже деякий час займаєтеся веб-програмуванням, ви, ймовірно, вже зустрічалися з формами. Форми – це спеціальні компоненти, які дозволяють відвідувачам вашого сайту взаємодіяти з сайтом або додатком. Форми дозволяють користувачам вводити дані, які зазвичай надсилаються на веб-сервер. HTML форма складається з одного або декількох віджетів: текстові поля, поле вибору, кнопки, чекбокси або радіокнопки (перемикачі). Наприклад, майже кожен сайт має контактну форму, де відвідувач може надіслати повідомлення власнику сайту. У такій контактній формі зазвичай є кілька полів: одне для імені користувача, одне для адреси електронної пошти та одне для основного повідомлення.
HTML-код простої контактної форми виглядає приблизно так:
<form action="handling-form.php" method="POST"> <div> <label for="name">Ім'я *</label> <input type="text" id="name" name="user_name" required> </div> <div> <label for="mail">E-mail *</label> <input type="email" id="email" name="user_mail" required> </div> <div> <label for="msg">Повідомлення *</label> <textarea id="msg" name="user_message" required></textarea> </div> <div class="button"> <button type="submit" name="submitForm">Надіслати повідомлення</button> </div> </form>
В результаті даний код в браузері буде виглядати приблизно так:
Коротке пояснення елементів форми
Тег форми <form>:
Найважливіша частина цього коду знаходиться в 1-му рядку, де починається форма. Ми запускаємо форму в HTML, використовуючи тег <form>. Оскільки форма є контейнером, після всіх її елементів йде закриваючий тег </form>. Тег форми має більше параметрів, але найбільш важливими є дія (action) і метод (method). У більшості форм використовуються тільки ці 2 параметра.
Що роблять ці параметри?
- Дія (action): параметр
actionповідомляє браузеру, який скрипт/сайт повинен бути викликаний, коли відвідувач натиснув кнопку відправки (submit). У нашому випадку браузер завантажить файлhandling-form.php, який служить для обробки наданої у формі інформації. - Метод (
method): цей параметр повідомляє браузеру, в якій формі надсилати користувацькі дані на веб-сервер. Значенням параметра є абоPOST, абоGET. В даний часPOSTвикористовується частіше, оскільки він більш безпечний.
Поля для введення даних (input):
Всередині форми у нас є кілька блоків div з двома елементами. У першому елементі ви можете бачити мітку для поля введення (label), а в другому – сам тег <input>. У нашому прикладі використовується 1 текстове поле. Це поле призначене для імені користувача. Для цього поля в тезі <input> використовується параметр type, що має значення text. Для адреси електронної пошти в тезі <input> використовується параметр type, що має значення email.
Для введення більшого за розміром тексту використовується спеціальне поле – текстова область, для якої використовується тег <textarea>.
В описаних тегах ми використовуємо атрибут required, за допомогою якого форма проходить просту перевірку в браузері перед відправкою на сервер.
Ще одним важливим моментом є параметр імені (name) для всіх 3 полів введення. Цей параметр допомагає визначити значення поля пізніше під час обробки форми. Важливо надавати унікальне ім’я кожному полю. Якщо ви не будете дотримуватися цього правила, ви не отримаєте ніякого повідомлення про помилку, але під час обробки форми буде цікавий сюрприз, оскільки ви не зможете точно визначити вхідні дані.
Кнопка відправки (submit):
Останній важливий елемент – це сама кнопка відправки. Це тег <button> з типом submit. Це поле відображається як кнопка в вашому браузері, і ви можете натиснути на неї. І цей клік надсилає форму з браузера на сервер і викликає сценарій, який визначений в параметрі action.
Стильове оформлення форми
Для дефолтного (як на картинці вище) стильового оформлення форми, ви можете використовувати такі CSS стилі:
<style>
form, .formOkMsg {margin: 0 auto; width: 650px; padding: 1em; border: 1px solid #ccc; border-radius: 1em;}
form div + div {margin-top: 1em;}
label {display: inline-block; width: 120px; text-align: right;}
input, textarea {font: 1.5em sans-serif; width: 450px; box-sizing: border-box; border: 1px solid #999;}
input:focus, textarea:focus {border-color: #000;}
textarea {vertical-align: top; height: 5em;}
.button {padding-left: 125px;}
button {font-size: 18px; background-color: #3097d1; color: #fff; padding: 7px 12px; border: 1px solid transparent; border-radius: 15px; cursor: pointer;}
button:hover {background-color: #2579a9;}
.errorMsg {font-size: 20px; color: red;}
</style>
Обробка HTML форми в PHP
Тепер у нас є HTML-код форми, але якщо ми натиснемо кнопку відправки, то отримаємо повідомлення 404 Not Found, якщо файл handling-form.php ще не існує.
Спочатку ви повинні зберегти HTML-код з попереднього блоку в файл з ім’ям handling-form.php. Так, це правильно, ми створимо компактну PHP сторінку, яка буде відображати HTML форму і сама обробляти її. Ми створимо код, який буде відображати HTML форму, якщо користувач відвідає цю сторінку. Якщо форма буде відправлена, то код файлу розпізнає цю дію, і замість відображення форми буде обробляти надіслані дані.
Якщо форма була відправлена і скрипт, визначений у параметрі action форми, викликається, то так званий суперглобальний масив $_POST буде заповнений інформацією, введеною користувачем. У нашому прикладі є 1 поле для тексту (Ім’я), 1 поле для E-mail, 1 текстова область і 1 кнопка для відправки даних. У кожного з цих елементів є своє ім’я (параметр name). Після відправки форми, дані з цього параметра будуть поміщені в масив $_POST.
Наприклад, якщо користувач заповнив поле для імені (параметр name якого зазначено як user_name), тоді ми можемо отримати це значення з масиву наступним чином:
<?php $userName = $_POST['user_name']; ?>
Що це означає? Це означає, що ми можемо перевіряти цей масив. Якщо він заповнений, значить користувач надіслав форму, а якщо він порожній, то потрібно обробити помилки, що виникли при відправці форми.
Зручна для користувачів форма повинна містити елементарну обробку помилок. Для цього є кілька способів. Ми можемо перевіряти введені користувачем дані на стороні клієнта за допомогою JavaScript, або ж робити це на стороні сервера за допомогою PHP. Звичайно, найкращим рішенням було б використовувати обидва методи, але в сьогоднішній статті ми розглянемо тільки перевірку форми за допомогою PHP.
Перш за все, ви повинні вирішити, які поля є обов’язковими, а які ні. Після цього вам потрібно визначити, який тип введення є прийнятним для певного поля. Наприклад, якщо ви хочете запитувати вік відвідувача, тоді припустимі лише цифри, а не текст або дата. Помітьте обов’язкові поля в HTML формі, а також відображуйте повідомлення про помилки, якщо вони виникають.
Наприклад, за допомогою наступного коду ми перевіряємо введені дані і присвоюємо їх певним змінним. Якщо якісь дані не введені, тоді ми записуємо повідомлення про помилку в змінну $errorMsg.
<?php
$userName = $userMail = $userMessage = "";
$errorMsg = "";
if (isset($_POST['submitForm'])) {
$userName = htmlspecialchars($_POST['user_name']);
$userMail = $_POST['user_mail'];
$userMessage = htmlspecialchars($_POST['user_message']);
if(trim($userName) == '') {
$errorMsg = 'Будь ласка, вкажіть своє ім\'я!';
} else if(trim($userMail) == '') {
$errorMsg = 'Будь ласка, введіть ваш email!';
} else if(trim($userMessage) == '') {
$errorMsg = 'Будь ласка, введіть повідомлення!';
}
} ?>
У разі будь-якої помилки нам потрібно знову відображати HTML-форму відвідувачеві, але й відображати повідомлення про помилку, щоб користувач міг виправити її. Отже, перед нами стоїть наступне практичне завдання:
- Показати форму користувачеві
- Опрацювати введені користувачем дані
- У випадку помилки показати форму, а також повідомлення про помилку
- Якщо помилок немає, показати користувачеві його дані і повідомлення про успіх
Робоча контактна форма в PHP
Фінальний результат робочої форми виглядає так:
<?php
$userName = $userMail = $userMessage = "";
$errorMsg = "";
if (isset($_POST['submitForm'])) {
$userName = htmlspecialchars($_POST['user_name']);
$userMail = $_POST['user_mail'];
$userMessage = htmlspecialchars($_POST['user_message']);
if(trim($userName) == '') {
$errorMsg = 'Будь ласка, вкажіть своє ім\'я!';
} else if(trim($userMail) == '') {
$errorMsg = 'Будь ласка, введіть ваш email!';
} else if(trim($userMessage) == '') {
$errorMsg = 'Будь ласка, введіть повідомлення!';
}
if($errorMsg == '') { ?>
<div class="formOkMsg">
<h3>Дякуємо! Ми отримали від вас такі дані:</h3>
<p>Ваше ім'я: <?php echo $userName; ?></p>
<p>Ваш email: <?php echo $userMail; ?></p>
<p>Ваше повідомлення: <?php echo $userMessage; ?></p>
<p><a href="handling-form.php">Повернутись</a> до заповнення форми</p>
</div>
<?php } ?>
<?php }
if(!isset($_POST['submitForm']) || $errorMsg != '') { ?>
<form action="handling-form.php" method="POST">
<div class="errorMsg"><?php echo $errorMsg; ?></div>
<div>
<label for="name">Ім'я *</label>
<input type="text" id="name" name="user_name" value="<?php echo $userName; ?>" required>
</div>
<div>
<label for="mail">E-mail *</label>
<input type="email" id="email" name="user_mail" value="<?php echo $userMail; ?>" required>
</div>
<div>
<label for="msg">Повідомлення *</label>
<textarea id="msg" name="user_message" required></textarea>
</div>
<div class="button">
<button type="submit" name="submitForm">Надіслати повідомлення</button>
</div>
</form>
<?php } ?>
Ця форма є повністю робочою, і ви можете використовувати її на практиці. Звичайно, ви можете поліпшити зовнішній вигляд форми і саму перевірку, щоб зробити її більш надійною, але для демонстрації такої PHP форми буде цілком достатньо.
Ви можете додати AJAX обробку помилок форми, додати відправку даних форми на свою пошту, збереження цих даних в базі даних і так далі. Але, все це є темою для наступних уроків.
На сьогодні все, дякуємо за увагу!
Потрібно більше інформації?
