HTML5 и его атрибуты для проверки формы

В этой статье я хочу рассказать, как можно проверить форму без использования php или javascript. На HTML5 есть возможность указывать, какое поле должно быть обязательным для заполнения, проверить правильность ввода в поле e-mail адрес, телефон, имя и т. д.

Если вы создаете сайты и вам нужно сделать форму обратной связи, то эта статья будет находка:

Итак, если вы не знаете языков программирования php или javascript, чтобы осуществить проверку формы, не беда – HTML5 справится с этим отлично.

К примеру, у нас есть стандартная html форма:

<form method="post" action="">
<p><input ENGINE="text" name="name" /></p>
<p><input type="text" name="email" /></p>
<p><input type="text" name="tel" /></p>
<p><textarea name="quest" rows="6" cols="40"></textarea></p>
<input type="submit" name="subscribe" value="Отправить!">
</form>

Результат:

Если не заполнить ни одного поля, а нажать кнопку «Отправить!», форма без проблем отправится на указанную почту в прописанном обработчике.
Как же сделать проверку формы на заполнение полей ?

1. Указать поле обязательным для заполнения с помощью атрибута «required».

Достаточно прописать атрибут «required» в том поле, которое вы считаете обязательным для заполнения. Для примера, давайте пропишем «required» к полю «email»:

<input type="text" name="email" required />

Результат:

Как видите, поле «email» стало обязательным для заполнения и форма не отправится до тех пор, пока не внесете туда значение.

2. Укажите атрибут «placeholder», чтобы пользователь видел, что необходимо вводить в поле. Например, так:

<input type="text" name="name" placeholder="Ваше Имя"/>

Заполните и для остальных полей:

<form method="post" action="">
<p><input type="text" name="name" placeholder="Ваше Имя"/></p>
<p><input type="text" name="email" placeholder="Ваш E-mail" required /></p>
<p><input type="text" name="tel" placeholder="Ваш телефон"/></p>
<p><textarea name="quest" rows="6" cols="40" placeholder="Ваш вопрос"></textarea></p>
<input type="submit" name="subscribe" value="Отправить!">
</form>

Результат:

3. Чтобы предотвратить неправильное заполнение поля формы, нужно в атрибуте «type» заменить значение «text» на «email». Например, было так:

<p><input type="text" name="email" placeholder="Ваш E-mail" required /></p>

стало так:

<p><input type="email" name="email" placeholder="Ваш E-mail" required /></p>

В результате, если пользователь, когда будет писать email адрес, не поставит «@», ему сразу же выскочит ошибка с подсказкой, что в адресе электронной почты должен присутствовать символ «@».

Результат:

Дополнение:

Такой фокус можно проделать с полем для сайта, если такое имеется:

<input type="url" >

формат ввода должен быть таким:

/

4. Проверить, правильно ли заполнены поля с помощью атрибута «pattern».
Чтобы проверить значение элемента на основе регулярного выражения, используют атрибут «pattern».

Например, если нужно, чтобы имя в поле всегда писалось на русском языке или чтобы номер телефона был написан по определенному шаблону «+38(093)-000-00-00» и т .д., то атрибут «pattern» отлично справится с этой задачей.

Шаблон:

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

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

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

Объяснение: в квадратных скобках [ ] пишите, какие буквы должны вводиться в поле для имени. В моем примере можно вводить только русские буквы в любом регистре. Если нужно только латинскими, сделайте вот так:

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

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

Цифра, что находится в фигурных скобках { } означает число вводимых символов. В моем примере не менее 4-х символов:

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

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

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

Объяснение: каждый проверяемый участок берется в круглые скобки ( ).

Итак, первый проверяемый участок до символа «@». В квадратных скобках [] я прописал, какие  буквы должны вводиться в поле. В моем примере это латинские буквы, цифры, нижнее подчеркивание, дефис и точка. В фигурных скобках { } я прописал, что символов должно быть не менее одного. То есть, такой номер не пройдет «@rambler.ru».

Далее я закрываю проверяемый участок круглой скобкой и прописываю знак «@».

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

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

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

Проверяем третий участок после знака «.». Открываем круглые скобки и в квадратных скобках прописываем снова, какие  буквы должны вводиться в поле. В моем примере это только латинские буквы. В фигурных скобках «{ }» я прописал, что символов должно быть от 2 до 8. Я так решил, потому что доменных зон меньше 2 и больше 8 символов я не видел (ru, info, ua, biz, com).

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

На этом проверка правильного заполнения поля email адреса закончилась.

Или скажу так: вот шаблон адреса электронной почты, по которому нужно создать проверочный:

bloggood_1.ua5@rambler.ru

Итак, в итоге поле «email» будет выглядеть вот так:

<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)-ххх-хх-хх

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

Итак, в итоге поле «tel» будет выглядеть вот так:

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

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

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

Это еще не все, можно сделать подсказку пользователю, как правильно нужно заполнить поле, если он что-то ввел не так, как вам нужно.
5. Подсказка в случае, если поле было заполнено не правильно.
Если пользователь в поле ввел имя на латыни, например, «Stepa», а вам нужно на русском «Степа», можно написать всплывающую подсказку для пользователя и показать пример, как нужно заполнить.

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

Вот так это будет выглядеть в коде:

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

Вот так это будет выглядеть в коде:

В итоге получилась вот такая форма с проверкой на правильное заполнение на HTML5 без использования php или javascript:

<form method="post" action="">
<p><input type="text" name="name" pattern="[А-Яа-яЁё]{4,}" placeholder="Ваше Имя" title="Имя должно быть на русском. Пример: Степа, Петя, Вася, Оля"/></p>
<p><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 /></p>
<p><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"/></p>
<p><textarea name="quest" rows="6" cols="40" placeholder="Ваш вопрос"></textarea></p>
<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-адрес

Тему я еще не закрыл, ждите продолжения! Чтобы не пропустить новых статей, подписывайтесь на обновления блога.

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

17 Ответов на комментарий - HTML5 и его атрибуты для проверки формы

1. Эдуард

   08.04.2016 в 23:54

   Доброго времени суток! Почитал вашу статью про обязательное заполнение полей и кое-что для себя взял на будущее, спасибо большое. Но у меня совсем другой код в файле, и я никак не могу прописать правило. Вот пример одного кода:

   <input class="input" ENGINE="text" name="phone" onfocus="if (this.value == 'Ваш телефон') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Ваш телефон';}" value="Ваш телефон">

   Не подскажете, как мне прописать правило для обязательного ввода своих данных? А то у меня на сайте форм таких много и все отправляются без данных. Письма приходят пустые…
2. Степан => автор блога

   08.04.2016 в 23:57

   Здравствуйте, Эдуард!
   А вот так пробовали:

   <input class="input" ENGINE="text" name="phone" onfocus="if (this.value == 'Ваш телефон') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Ваш телефон';}" value="Ваш телефон" required />
   
3. Илья

   18.11.2016 в 00:10

   Здравствуйте! У меня проблема, код на поле заявки прописан как в вашей статье. Только одна проблема, когда человек заказывает с ПК или с андройда, то он обязательно должен заполнить поле Имя и Телефон. Но посетителей, оставляющих заявку с айфона, это почему-то не касается. Уже несколько раз приходили заявки без телефона.
   Сам код выглядит вот так:

   <input name="name" ENGINE="text" id="applicationName" maxlength="30" placeholder="Имя" pattern="[а-яА-ЯёЁa а-яА-ЯёЁa]{2,30}" required />
   
   				<input name="telephone" type="tel" id="applicationTelephone" maxlength="20" placeholder="Телефон 89109009090" pattern="[0-9]{6,16}" required /> 

   Подскажите пожалуйста, как это исправить.
4. Степан => автор блога

   21.11.2016 в 16:01

   Здравствуйте.
   Воспользуйтесь PHP. Будет работать для всех устройств.
5. Илья

   24.11.2016 в 20:37

   Спасибо за ответ. Не подскажите какую команду надо ввести? Я в коде новичок, разбираюсь путем проб и ошибок.
6. Степан => автор блога

   24.11.2016 в 22:00

   Вот вам пример:
   /effekty-dlya-sajta-2/prostaya-html-forma-obratnoj-svyazi-dlya-sajta.html/

   Принцип тот же.
7. Антон

   09.06.2017 в 08:22

   [text* name class:h_input placeholder “Ваше имя*”]
   [tel* tel class:h_input placeholder “Номер телефона*”]
   [email* email class:h_input placeholder “Ваш E-mail”]
   [submit class:btn-h_zayav “Оставить заявку”]

   пишет Использованы недопустимые названия (name) элементов управления формы.

   Что тут не так ??? Заранее спасибо .
8. Степан => автор блога

   12.06.2017 в 21:23

   Ну, и что это вы делаете, Антон, объясните мне?! Вы решили вставить атрибуты для проверки форм для плагина “Contact Form7”?
9. Антон

   13.06.2017 в 10:23

   Я в этом деле полный 0 ,это делал другой человек ,я вынужден переделать (, надеюсь на вашу помощь ,заранее спасибо !
   Да именно для “Contact Form7”
   На сайте все отображается нормально ,а в “Contact Form7” пишет ошибку !
10. Степан => автор блога

    15.06.2017 в 10:00

    Вот тут все есть contactform7.com.
    Посмотрите внимательно и все сделайте также.
11. Денис

    06.11.2017 в 13:16

    Добрый день – не получается стандартной командой required сделать поля обязательными для ввода – гляньте плз –

    <div class="step step-0" data-button="" style="display: block">
    <div class="cont " data-name="widget_0" data-first_name="1" data-ordering="0" data-required="1" data-default="" data-label="Ваше имя" data-ENGINE="input">
    <input type="text" class="input" name="widget_0" value="" required placeholder="Ваше имя*" /></div>
    <div class="cont " data-name="widget_1" data-default="" data-pattern="" data-required="1" data-mask="" data-phone="1" data-ordering="1" data-label="Ваш телефон" data-type="tel">
    <input type="tel" class="input" name="widget_1" value="" required placeholder="Ваш телефон*" />
    </div>
    </div>  
    
12. Степан => автор блога

    07.11.2017 в 19:20

    Здравствуйте!
    А где в коде:

    <form method="post" action="">

    и кнопка отправить:

    <input ENGINE="submit" name="subscribe" value="Отправить!">

    Вам бы вначале почитать основы HTML.

    <form method="post" action="">
    <div class="step step-0" data-button="" style="display: block">
    <div class="cont " data-name="widget_0" data-first_name="1" data-ordering="0" data-required="1" data-default="" data-label="Ваше имя" data-type="input">
    <input type="text" class="input" name="widget_0" value="" required placeholder="Ваше имя*" /></div>
    <div class="cont " data-name="widget_1" data-default="" data-pattern="" data-required="1" data-mask="" data-phone="1" data-ordering="1" data-label="Ваш телефон" data-type="tel">
    <input type="tel" class="input" name="widget_1" value="" required placeholder="Ваш телефон*" />
    </div>
    </div>
    <input type="submit" name="subscribe" value="Отправить!">
    </form> 
    
13. new

    21.11.2017 в 23:52

    Добрый день – не получается стандартной командой required сделать поля обязательными для ввода – гляньте плз –
    Денис, у меня тоже не получалось, пока не поставил – required=”” и сразу все заработало!
14. Степан => автор блога

    22.11.2017 в 00:04

    Странно, как может не работать?
    Все работает, просто нужно вставлять тег form:

    <form method="post" action="">

    то есть, вот так работать не будет:

    <input ENGINE="text" class="input" required />

    а вот так будет:

    <form method="post" action="">
    <input type="text" class="input" required />
    <input type="submit" name="subscribe" value="Отправить!">
    </form> 
    

    Попробуйте скопировать этот код и вставить себе в HTML документ и напишите результат.
    Спасибо за комментарий!
15. Владимир

    13.01.2020 в 13:30

    Ваш паттерн для email

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

    некорректно работал до тех пор, пока я не добавил backslash перед точкой

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

    Без него паттерн пропускает адреса вроде example@google

    Спасибо за статью, очень помогли!
16. Andrey

    02.06.2020 в 11:26

    Добрый день, Степан!
    А как настроить поле e-mail, чтобы вводились ТОЛЬКО английские символы?)
17. Степан => автор блога

    04.09.2020 в 20:34

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

Метки: html, форма обратной связи