Как сделать поле ввода обязательным для заполнения

Как сделать поле ввода обязательным для заполнения

Как сделать поле ввода обязательным для заполнения


Как сделать поле ввода обязательным для заполнения
Как сделать поле ввода обязательным для заполнения

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

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

Итак, в итоге поле «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="Пример: " 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-адрес

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

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

Последние новости категории:

Похожие статьи

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

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

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

Как сделать поле ввода обязательным для заполнения Как сделать поле ввода обязательным для заполнения Как сделать поле ввода обязательным для заполнения Как сделать поле ввода обязательным для заполнения Как сделать поле ввода обязательным для заполнения Как сделать поле ввода обязательным для заполнения Как сделать поле ввода обязательным для заполнения Как сделать поле ввода обязательным для заполнения Как сделать поле ввода обязательным для заполнения Как сделать поле ввода обязательным для заполнения Читать новость Как сделать поле ввода обязательным для заполнения фото. Поделитесь новостью Как сделать поле ввода обязательным для заполнения с друзьями!

Похожие новости:

Годовщина свадьбы поздравление мужу на татарском языке



Как украсить комнату своими руками для мужа своими руками



Как сделать портативную программу как в portableapps



Вязание берета спицами для женщин модные модели 2016



Как усилить прием сигнала сотовой связи своими руками