Загрузка

RUS | ANG | |

StepkinBlog.ru

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap

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

01.03.2016


13:48


3039


2


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

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

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

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

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

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

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

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

<input type="text" required />

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

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

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

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

<input type="email" >

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

Проверка поля 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-адрес



Случайные записи:

  1. Как прописать путь к файлу, картинке или странице. Основы HTML для начинающих. Урок №13
  2. Как сделать таблицу в HTML. Основы HTML для начинающих. Урок №14
  3. Модальное окно (всплывающее окно). Основы bootstrap 3 для начинающих. Урок №17
  4. Вывод переменной и строки в php на экран. Основы PHP с нуля. Урок №6
  5. Как сделать карту изображения в HTML(навигационная карта). Основы HTML для начинающих. Урок №15

Последние записи рубрики:

  1. Бесплатный курс по основам HTML
  2. Шпаргалка по HTML на русском языке
  3. Создание простого мини сайта. Практика по пройдённому материалу
  4. Тесты HTML онлайн. Основы HTML для начинающих
  5. Как прописать мета теги. Основы HTML для начинающих. Урок №21

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

  1. Стас Великолептный says:

    Спасибо! Класс! То что искал! :arrow:
    Степан, респект и уважуха! Подписываюсь на обновления блога. Буду ждать выход новых статей по HTML.
    Меня еще интересует, когда будут остальные уроки по основам CSS?

    Ответить

    Степка
    Степка ответил(а) на комментарий:

    Пожалуйста, Стас! Остальные уроки по основам CSS начнутся сразу после завершения основ HTML

    Ответить

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

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

Подписаться на обновления:

Подпишись на обновления моего блога через e-m@il:

@

Реклама на блоге:

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

Довести количество статей до 150

Доделать этот блог

Закончить тему «Основы CSS»

Закончить тему «Основы PHP»

Начать тему «Основы JavaScript»

Добиться посещаемости 500 чел/сутки

Статистика:

Записей: 104
Страниц: 3
Рубрик: 9
Меток: 11
Комментариев: 245