Блог Vaden Pro

Все о самостоятельном создании и продвижении сайтов
Вы здесь

Атрибут pattern

Дата:14.09.15 в 16:07
Справочник: 

Характеристики атрибута

В каких браузерах работает?

10.0+ 5.0+ 9.6+ - 4.0+ 2.3+ 3.0+

В каких спецификациях используется?

HTML - - 5.0
XHTML - -

Для чего используется?

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

Как правильно задавать?

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

Какие значения могут быть записаны в атрибут?

Возможные комбинации значений указаны в таблице

Кодировка Расшифровка
\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})? Десятичная дробь с двумя знаками после запятой
\d+(\.\d{2})? Десятичная дробь с двумя знаками после точки
\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3} Адрес IP

В каких тегах применяется?

Применяется только в input.

Пример использования

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Атрибут pattern</title>
 </head>
  <body>
   <form>
    <p>Запишите номер телефона в формате =38 (0хх) ххх-хх-хх:</p>
    <p><input type="tel" pattern="38 (0[0-9]{2})\s[0-9]{3}-[0-9]{2}-[0-9]{2}"></p>
    <p><input type="submit" value="Выслать"></p>
   </form>
  </body>
</html>

Оценка: 
Оценок: 2 (средняя 5 из 5)
Тип HTML атрибута: 
Понравилась статья? Расскажите о ней друзьям: