HTML5: проверка данных формы без Javascript
Как сделать, чтобы проверка корректности заполнения юзером формы могла производиться на стороне клиента, без лишнего обращения к серверу, но и без программирования на Javascript?
Короткий ответ на вопрос очень прост - используйте готовые элементы HTML5 для ввода строк по шаблону (см. табл. 2 по ссылке) или атрибут pattern с регулярным выражением, если готового шаблона для вашего случая не существует.
В качестве примера рассмотрим простую форму, где пользователь вводит имя от 3 до 38 символов длиной, корректный адрес E-mail, отмечает чекбокс, что он с чем-то согласен и отправляет это всё на сервер.
Предположим, что у вас установлен XAMPP
с настройками по умолчанию, запущена компонента Apache, в папке c:\xampp\htdocs\
создана вложенная папка html5form
, а в ней (на всякий случай) файл .htaccess
со строкой
AddDefaultCharset utf-8
Теперь создадим в папке html5form
файл index.html
со следующим содержимым:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Форма HTML5 с проверкой данных</title> </head> <body> <h2>Пример формы HTML5</h2> <form method="post" action="action.php"> <table style="width:80%; margin:auto; border:1px dotted green;"> <tr> <td style="width:50%; text-align: right;">Введите имя:</td> <td><input name="name" type="text" size="40" maxlength="38" required pattern="[а-яёА-ЯЁA-Za-z]{3,38}" placeholder="Только буквы, от 3 до 38 символов"> </td> </tr> <tr> <td style="width:50%; text-align: right;">E-mail:</td> <td><input name="email" type="email" size="40" maxlength="38" required placeholder="Правильный адрес, например, login@host.com"> </td> </tr> <tr> <td style="width:50%; text-align: right;"> <label for="licence">Я согласен получать спам</label> </td> <td> <input name="licence" type="checkbox" id="licence" required> </td> </tr> <tr> <td></td> <td><input name="ok" type="submit" value="Отправить"></td> </tr> </table> </form> </body> </html>
Здесь и далее предполагается, что мы используем кодировку Юникода utf-8, а не однобайтовую!
Если не брать в расчёт требования защиты формы, код на PHP для обработки переданных данных становится совсем простым, ведь мы уже проверили "базовую" корректность на стороне клиента.
Создадим в той же папке файл action.php
для примера простейшей обработки отправленных данных:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Простейший обработчик формы</title> </head> <body> <?php $error = ''; if (isset($_POST['ok'])) { $name = $_POST['name']; $email = $_POST['email']; echo "<p>Вы ввели данные: $name, $email</p>"; } else { echo '<p>Не переданы данные!</p>'; } ?> </body> </html>
Выполнить пример можно, набрав в адресной строке браузера адрес http://localhost/html5form/
Скриншот приложения в работе (фрагмент экрана)
14.10.2019, 14:41 [1101 просмотр]