BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Все про HTML » HTML5 и его атрибуты для проверки формы

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

2015-05-22 / Вр:13:29 / просмотров: 7264

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

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

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

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

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

<form method="post" action="">
<p><input type="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>

Результат:

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

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

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

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

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

Результат:

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

Как видите, поле «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>

Результат:

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

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 адрес, не поставит «@», ему сразу же выскочит ошибка с подсказкой, что в адресе электронной почты должен присутствовать символ «@».

Результат:

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

Дополнение:

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

<input type="url" >

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

http://bloggood.ru/

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

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

Итак, в итоге поле «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 и его атрибуты для проверки формы

В итоге получилась вот такая форма с проверкой на правильное заполнение на 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-адрес

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

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

Получай обновления блога!!! Подпишись:

Популярные статьи:

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

  1. Эдуард

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

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

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

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

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

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

    Ответить

  2. Илья

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

    <input name="name" type="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 /> 

    Подскажите пожалуйста, как это исправить.

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

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

    Ответить

    Илья отвечает:

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

    Ответить

    Степан => автор блога

    Степан => автор блога отвечает:

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

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

    Ответить

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Subscribe without commenting

Метки: ,

Мои цели на 2017 год:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Довести количество статей до 750

4). Создать портфолио и мини интернет-магазин шаблонов

5). Создать книгу

6). Довести количество статей до 800

7). Добиться посещаемости 3000 человек/сутки

8). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 734
Количество страниц на блоге: 20
Количество рубрик на блоге: 27
Количество меток на блоге: 71
Количество комментариев на блоге: 4010