/html/input/pattern:> Шаблон ввода_

Атрибут pattern

Синтаксис

HTML
<input type="..." pattern="[значение]">

Описание

Атрибут / параметр pattern (от англ. "pattern" ‒ «шаблон») задаёт шаблон (регулярное выражение) для значения текстового элемента формы.

Примечание

  • Шаблон ввода распространяется на всё значение элемента формы.
  • Рекомендуется указывать описание шаблона в глобальном атрибуте «title» и/или в тексте рядом с соответствующим элементом формы.

Условия использования

  1. Применяется только к следующим типам полей формы: «email», «password», «search», «tel», «text», «url».
  2. Специальные символы указываемые в значении поля формы должны быть экранированы. Например, символ «&» АМПЕРСАНД [U+0022] должен быть заменён символьной ссылкой «&amp;».

Поддержка браузерами

Chrome
Поддерж.
Firefox
Поддерж.
Opera
Поддерж.
Maxthon
Поддерж.
IExplorer
Поддерж.
Safari
Поддерж.
iOS
Поддерж.
Android
Поддерж.

Спецификация

Верс. Раздел
HTML
2.0 Input Field: INPUT
3.2 INPUT text fields, radio buttons, check boxes, ...
4.01 17.4 The INPUT element
5.0 4.10.5.3.6 The pattern attribute
The pattern attribute...
5.1 4.10.5.3.6. The pattern attribute
The pattern attribute...
XHTML
1.0 Extensible HyperText Markup Language
1.1 Extensible HyperText Markup Language

Значения

В качестве значения данного атрибута указывается любое регулярное выражение. Регулярное выражение может включать в себя следующие обозначения:

Инверсия

^
Инверсия значения. Обозначает, что в значении должны отсутствовать символы указанные после символа «^» ЦИРКУМФЛЕКС [U+005E].
pattern="[^А-ЯЁ]"
(в значении должны отсутствовать любые прописные русские буквы).

Числа

[09]
Соответствует одному из указанных символов, то есть в данном случае «0» или «9».
[0-9]
Соответствует любому одному символу из указанного диапазона, то есть в данном случае от «0» до «9».

Буквы

[abc]
[абв]
Соответствует одному из указанных символов.

Примечание: при указании символов учитывается их регистр:

  • [abc] ‒ соответствует английской букве «a», «b» или «c».
  • [ABC] ‒ соответствует английской букве «A», «B» или «C».
  • [aBc] ‒ соответствует английской букве «a», «B» или «c».
  • [абв] ‒ соответствует русской букве «а», «б» или «в».
  • [АБВ] ‒ соответствует русской букве «А», «Б» или «В».
  • [аБв] ‒ соответствует русской букве «а», «Б» или «в».
[a-c]
[а-в]
Соответствует любой одной букве из указанного диапазона. При этом буквы указываемого диапазона должны быть одного регистра.

Примечание: для указания всех букв алфавита используются следующие шаблоны:

  • [a-z] ‒ соответствует любой строчной английской букве.
  • [A-Z] ‒ соответствует любой прописной английской букве.
  • [a-zA-Z] ‒ соответствует любой английской букве в любом регистре.
  • [а-яё] ‒ соответствует любой строчной русской букве.
  • [А-ЯЁ] ‒ соответствует любой прописной русской букве.
  • [а-яёА-ЯЁ] ‒ соответствует любой русской букве в любом регистре.

Специальные символы

\d
Соответствует любой цифре. (Аналогично значению «[0-9]»)
\w
Соответствует любой латинской букве, цифре и знаку препинания.
\s
Соответствует любому пробельному символу.
\D
Соответствует любым символам кроме цифр. (Аналогично значению «[^0-9]»)
\W
Соответствует любым символам кроме латинских букв, цифр и знаков препинания.
\S
Соответствует любым символам кроме пробельных символов.

Квантификаторы (количество вхождений символа в строку)

{n}
«n» вхождений предыдущего символа(-ов) в строку.
{n,}
«n» или более вхождений предыдущего символа(-ов) в строку.
{n,m}
От (не менее) «n» до (не более) «m» вхождений предыдущего символа(-ов) в строку.
*
Произвольное число вхождений предыдущего символа(-ов) в строку.
+
Одно или более число вхождений предыдущего символа(-ов) в строку.
?
Ни одного или одно вхождение предыдущего символа(-ов) в строку.

Примечание: если в шаблоне необходимо указать какой-либо специальный символ (например, «(», «{», «+»), то его следует экранировать с помощью символа «\» ОБРАТНОЙ КОСОЙ ЧЕРТЫ [U+005C] (например, «(» ⇒ «\(», «{» ⇒ «\{», «+» ⇒ «\+»).


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

Листинг кода
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Параметр pattern (Элемент input)</title>
</head>
<body>
<h1>Пример использования атрибутом "pattern"</h1>
<form action="/examples/php-scripts/telephone.php" method="post">
<p><label>Мобильный телефон:
<input type="tel" name="phone_number" placeholder="+7 (900) 123-45-67" pattern="\+7\s?[\(]{0,1}9[0-9]{2}[\)]{0,1}\s?\d{3}[-]{0,1}\d{2}[-]{0,1}\d{2}"></label></p>
<p><input type="reset"> <input type="submit"></p>
</form>
</body>
</html>
Параметр pattern (Элемент input)