В сегодняшней практической статье мы рассмотрим все, что нужно знать начинающим о HTML формах в 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 сообщает браузеру, какой скрипт/сайт должен быть вызван, когда посетитель нажал кнопку отправки (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-код формы, но если мы нажмем кнопку отправки, то получим сообщение 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
$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 обработку ошибок формы, добавить отправку данных формы на свою почту, сохранение этих данных в базе данных и так далее. Но, все это является темой для последующих уроков.
На сегодня все, спасибо за внимание!
Выбор мастера для ремонта и перетяжки мебели — задача, которая требует вдумчивого подхода. Ведь от…
Выбор идеального хостинга под свой сайт может быть довольно запутанным делом, особенно когда существует так…
Чтобы избегать ошибок, нужно набираться опыта; чтобы набираться опыта, надо делать ошибки Лоуренс Питер
Краткое определение Черного SEO Черное СЕО (или Черная оптимизация) — это любая практика, целью которой…
Получение водительских прав категории C открывает двери к профессиональной деятельности, связанной с управлением грузовыми автомобилями.…