Как проверить HTML форму. Основы HTML для начинающих. Урок №19

Всем привет!
Продолжаем изучать основы HTML. В этом уроке мы разберем, как проверить HTML форму на заполнение без использования языка программирования.
Да, именно так, проверку формы будем учиться делать на чистом  HTML.
Когда-то нужно было для проверки форм использовать PHP или JavaScript. Но HTML на месте не стоит и на сегодняшний день добавлены новые возможности, одна из которых – проверка форм, которую мы и рассмотрим сегодня.

Как создать форму на HTML, вы уже знаете! К примеру, у вас вот такая форма:

При нажатии «Отправить!» данные отправятся без проблем, даже если они введены абсолютно не правильно. Чтобы такого не произошло, существуют различные проверки форм. Начнем с простого.

○ Обязательное поле для заполнения

Вы можете указать пользователю, какое поле обязательное для заполнение, а какое нет. Для этого вставьте в любое поле атрибут «required»:

<input type="text" required />

Если пользователь оставит это поле пустым и попытается отправить форму, браузер выдаст ошибку:

○ Проверка поля email

Простой способ проверить поле email, это проверить, есть ли в адресе наличие знака «@». Для этого в атрибуте «type» должно быть прописано «email»:

<input type="email" >

Если пользователь в адресе не введет «@», браузер выдаст ошибку:

○ Проверка полей регулярным выражением

Этот способ сложнее, чем предыдущие два, но более интересный и раскрывающий большие возможности для проверки форм. Используется атрибут «pattern».

pattern="выражение"

Пример:

<input type="text" pattern="выражение">

Вот, например, вам нужно, чтобы пользователь заполнил форму с именем только на русском языке.
В атрибуте «pattern» пропишите вот такое выражение:

pattern="[А-Яа-яЁё]{5,}"

Итак, в квадратных скобках [ ] прописывается, какие буквы должны присутствовать в поле для имени. Я указал, что в поле должны присутствовать только русские буквы в любом регистре.

Если вы хотите, чтобы пользователь вводил только латинские буквы, тогда «pattern» будет выглядеть  следующим образом:

pattern="[A-Za-z]{5,}"

Таблица 1

Выражение	Описание
[A-Z]	Только заглавная латинская буква.
[A-Za-z]	Только латинская буква в любом регистре.
[А-Яа-яЁё]	Только русская буква в любом регистре.
[A-Za-zА-Яа-яЁё]	Любая буква русского и латинского алфавита.

Цифры,  что находятся в скобках { } – это число допустимых символов.  В моем примере символов должно быть не меньше 5.

Таблица 2

Выражение	Описание
[A-Za-z]{6,}	Не менее шести латинских букв.
[A-Za-z]{6}	Шесть латинских букв.
[А-Яа-яЁё]{6,}	Не менее шести букв русского и латинского алфавита.
[A-Za-zА-Яа-яЁё]{6}	Шесть букв русского и латинского алфавита.

○ Проверка поля email регулярным выражением

Проверить поле email можно также через регулярное выражение.

Атрибут «pattern» будет выглядеть вот таким выражением:

pattern="([A-z0-9_.-]{1,})@([A-z0-9_.-]{1,}).([A-z]{2,8})"

В круглые скобки ( ) нужно брать каждый проверяемый участок. Первый проверяемый участок будет до символа «@». Внутри круглых скобок ( ) нужно прописать квадратные скобки [ ] и внутри этих указать , какие буквы должны вводиться в поле. Я указал латинские буквы, цифры, нижнее подчеркивание, дефис и точка. Дальше я прописал в фигурных скобках { } количество символов. В моем примере должно быть не меньше одного символа перед знаком «@».

([A-z0-9_.-]{1,})@

После знака «@» опять открываем круглые скобки ( ) для проверяемого участка. Это будет второй проверяемый участок и будет он аж до точки «.»

Внутри круглых скобок ( ) нужно прописать квадратные скобки [ ] и внутри их указать, какие буквы должны вводиться в поле. Я указал латинские буквы, цифры, нижнее подчеркивание, дефис и точка. Дальше я прописал в фигурных скобках { } количество символов. В моем примере должно быть не меньше одного символа перед знаком «.».

@([A-z0-9_.-]{1,}).

Проверяем третий участок после знака «.».Опять открываем круглые скобки ( ) для проверяемого участка и в квадратных скобках [ ] снова прописываем проверку.  Я указал латинские буквы, и в фигурных скобках { } указал, что символов должно быть от 2 до 8.

Я думаю, такое количество символов достаточное, так как доменных зон, названия которых меньше 2 и больше 8 символов я еще не видел (ru, info, ua, biz, com).

.([A-z]{2,8})

Вот так выглядит полностью готовая проверочная форма для проверки электронной почты:

<input type="email" name="email" pattern="([A-z0-9_.-]{1,})@([A-z0-9_.-]{1,}).([A-z]{2,8})" placeholder="Ваш E-mail" required />

○ Проверка поля для телефона регулярным выражением

Проверить поле для ввода телефона можно также через регулярное выражение.

Атрибут «pattern» будет выглядеть вот таким выражением:

pattern="\+([0-9]{1,3})(\([0-9]{2,3}\))-([0-9]{7})"

Образец заполнения номера телефона будет вот таким:

+38(093)-ххххххх

Можно и так:

pattern="\+([0-9]{1,3})(\([0-9]{2,3}\))-([0-9]{3})-([0-9]{2})-([0-9]{2})"

Тогда образец заполнения номера телефона будет вот таким:

+38(093)-ххх-хх-хх

Можно и так:

pattern="7\([0-9]{3}\)[0-9]{3}-[0-9]{2}-[0-9]{2}"

Тогда образец заполнения номера телефона будет вот таким:

7(ххх)ххх-хх-хх

Я думаю, вы разобрались.
Обращаю ваше внимание на один нюанс: бывает, что номер телефона содержит знак «+» или круглые скобки (). Браузер может прочитать их как дополнение к коду, что может привести к неправильной работе кода. Поэтому эти символы нужно экранировать! Экранируем символом «\».
Пример:

7\([0-9]{3}\)

или

\+7\([0-9]{3}\)

Знак «экранировать» нужно ставить перед экранирующим элементом. Я думаю, вы это заметили.
Итак, вот так выглядит полностью готовая проверочная форма для проверки номера телефона:

<input type="text" name="tel" pattern="\+([0-9]{1,3})(\([0-9]{2,3}\))-([0-9]{3})-([0-9]{2})-([0-9]{2})" placeholder="Ваш телефон"/>

Ну и напоследок хочу Вам предложить сделать для формы подсказку. Например,  если пользователь что-то не так введет, ему появится от вас послание, как нужно правильно заполнить поле. Это не относится к проверке, но все же, я его напоследок здесь и расскажу.

○ Подсказки после неудачного ввода данных в поле формы

Если пользователь что-то не так введет, ему появиться от вас послание, как нужно правильно заполнить поле. Для этого вставляем в любое необходимое поле тег  «title»:

title="Имя должно быть на русском. Пример: Степа, Петя, Вася"

Вот полностью готовый код:

<input type="text" name="name" pattern="[А-Яа-яЁё]{4,}" placeholder="Ваше Имя" title="Имя должно быть на русском. Пример: Степа, Петя, Вася"/>

Если подбить итог урока, то можно создать вот такую форму:

<form method="post" action="">
<input type="text" name="name" pattern="[А-Яа-яЁё]{4,}" placeholder="Ваше Имя" title="Имя должно быть на русском. Пример: Степа, Петя, Вася"/ required><br>
<input type="email" name="email" pattern="([A-z0-9_.-]{1,})@([A-z0-9_.-]{1,}).([A-z]{2,8})" placeholder="Ваш E-mail" title="Пример: bloggood@mail.ru" required /><br>
<input type="text" name="tel" pattern="\+([0-9]{1,3})(\([0-9]{2,3}\))-([0-9]{3})-([0-9]{2})-([0-9]{2})" placeholder="Ваш телефон" title="Пример: +380(93)-000-00-00"/ required><br>
<textarea name="quest" rows="6" cols="40" placeholder="Ваш вопрос"></textarea><br>
<input type="submit" name="subscribe" value="Отправить!"> .
</form>

Попробуйте отправить незаполненную форму

[Посмотреть результат]

Таблица регулярного выражения

Выражение	Описание
\d [0-9]	Одна цифра от 0 до 9.
\D [^0-9]	Любой символ кроме цифры.
\s	Пробел.
[A-Z]	Только заглавная латинская буква.
[A-Za-z]	Только латинская буква в любом регистре.
[А-Яа-яЁё]	Только русская буква в любом регистре.
[A-Za-zА-Яа-яЁё]	Любая буква русского и латинского алфавита.
[0-9]{3}	Три цифры.
[A-Za-z]{6,}	Не менее шести латинских букв.
[0-9]{,3}	Не более трёх цифр.
[0-9]{5,10}	От пяти до десяти цифр.
^[a-zA-Z]+$	Любое слово на латинице.
^[А-Яа-яЁё\s]+$	Любое слово на русском включая пробелы.
^[ 0-9]+$	Любое число.
[0-9]{6}	Почтовый индекс.
\d+(,\d{2})?	Число в формате 1,34 (разделитель запятая).
\d+(\.\d{2})?	Число в формате 2.10 (разделитель точка).
\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3}	IP-адрес