БлогNot. HTML5: проверка данных формы без Javascript

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 просмотр]


теги: учебное html php

К этой статье пока нет комментариев, Ваш будет первым