Атрибут pattern
Синтаксис
HTML
<input type="..." pattern="[значение]">
Описание
Атрибут / параметр pattern (от англ. "pattern" ‒ «шаблон») задаёт шаблон (регулярное выражение) для значения текстового элемента формы.
Примечание
- Шаблон ввода распространяется на всё значение элемента формы.
- Рекомендуется указывать описание шаблона в глобальном атрибуте «
title» и/или в тексте рядом с соответствующим элементом формы.
Условия использования
- Применяется только к следующим типам полей формы: «
email», «password», «search», «tel», «text», «url». - Специальные символы указываемые в значении поля формы должны быть экранированы. Например, символ «
&» АМПЕРСАНД [U+0022] должен быть заменён символьной ссылкой «&».
Поддержка браузерами
Chrome
Поддерж.
Firefox
Поддерж.
Opera
Поддерж.
Maxthon
Поддерж.
IExplorer
Поддерж.
Safari
Поддерж.
iOS
Поддерж.
Android
Поддерж.
Спецификация
| Верс. | Раздел |
|---|---|
| HTML | |
| 2.0 | |
| 3.2 | |
| 4.01 | |
| 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 | |
| 1.1 | |
Значения
В качестве значения данного атрибута указывается любое регулярное выражение. Регулярное выражение может включать в себя следующие обозначения:
Инверсия
Числа
- [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>
<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)