III. Проверка правильности введенных данных

В формах пользователям часто нужно заполнить поля, в которых информация должна иметь определенный, заранее известный формат. Например, это может быть телефонный номер или адрес электронной почты. Правильность заполнения такого поля определяется некоторым шаблоном. Для этого хорошо подходят регулярные выражения.

В HTML4 такая проверка могла быть выполнена только с помощью программного кода Javascript.

В HTML5 шаблон (регулярное выражение) задается атрибутом pattern, а выполнение сопоставления значения с шаблоном перекладывается на браузер.

Например,

<input type="text" title="Шаблон: 2 буквы и 6 цифр"             pattern="[a-zA-Z]{2}\d{6}" />

В спецификации HTML5 предполагается, что для сопоставления формата может потребоваться нажать кнопку Submit. Однако браузеры могут отслеживать правильность вводимой информации прямо в процессе заполнения поля.

ЗАДАНИЕ 4 (Использование регулярного выражения для проверки правильности ввода данных)

В текстовое поле необходимо ввести номер сотового телефона в формате:

+7 или 8‑ХХХ‑ХХХ-ХХ-ХХ.

В случае ошибки ввода поле должно быть отформатировано особым образом (использовать псевдокласс :invalid). Например,

Замечание

Для задания цифр в шаблоне использовать \d с квантификатором в фигурных скобках. Знак "плюс" нужно экранировать.

Дополнительная информация

Новые типы элементов input

Если браузер встречает элемент input с неизвестным ему значением атрибута type, то он рассматривает этот элемент как текстовое поле (type="text").

В HTML5 введено несколько новых типов элементов input для текстовых полей со специальными форматами: email, url, number, range, date, datetime, month, week, time, color, tel, search.

Пока браузеры поддерживают не все эти типы. Наиболее широко они представлены в браузерах Chrome и Opera.

Только типы email и url реализованы во всех основных браузерах — Firefox, Chrome, Opera, Safari для Windows. Однако реализация типа еще не означает, что

Браузеры, не поддерживающие HTML5, будут рассматривать новые элементы как обычные текстовые поля. Браузеры, поддерживающие HTML5, для этих элементов могут обеспечивать более интеллектуальную поддержку.

Например, для полей адресов электронной почты может обеспечиваться возможность вставлять адреса прямо из адресной книги.

Для числовых полей (type="number") может игнорироваться ввод букв, а на виртуальной клавиатуре буквы могут становиться просто недоступными.

Аналогично для полей дат (type="date") браузеры могут предоставлять возможность выбирать даты из календаря и отвергать неправильный формат.

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

Поля электронных адресов (type="email") допускают перечисление в строку нескольких адресов через запятую.

Для числовых полей (type="number") можно задавать необязательные атрибуты min, max (целыми значениями) и step (может быть дробным), которые буду использоваться. Если задан атрибут step, то браузеры могут добавлять к полю спиннер (две стрелки — вверх и вниз) для последовательного перебора значений.

Элементы с type="range" (Firefox пока не поддерживает, только Chrome, Opera, Safari для Windows) отображаются в виде слайдеров. Для слайдера атрибуты min, max задаются целыми числами, и, если значения должны меняться скачками, то атрибут step, который может иметь дробные значения. Например,

<input id="range" type="range" min="1" max="2" step=".1">

ЗАДАНИЕ 5 ( Итоговое задание)

Предложить пример формы, в которой будет использована большая часть описанных возможностей, включая новые типы элементов input.