Pattern html – Примеры шаблонов для html5 form input pattern

Leave a Comment / Html / By /

Атрибут pattern | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
10.05.0+9.6+4.0+2.3+3.0+

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

HTML:3.24.015.0XHTML:1.01.1

Описание

Указывает регулярное выражение, согласно которому требуется вводить и проверять данные в поле формы. Если присутствует атрибут pattern, то форма не будет отправляться, пока поле не будет заполнено правильно.

Синтаксис

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

Значения

Некоторые типовые регулярные выражения перечислены в табл. 1.

Табл. 1. Регулярные выражения
ВыражениеОписание
\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-адрес

Пример

HTML5IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Атрибут pattern</title>
 </head>
  <body>
   <form>
    <p>Введите телефон в формате 2-xxx-xxx, где вместо x 
    должна быть цифра:</p>
    <p><input type="tel" pattern="2-[0-9]{3}-[0-9]{3}"></p>
    <p><input type="submit" value="Отправить"></p>
   </form>
  </body>
</html>

Атрибут pattern HTML тега input

Атрибут pattern определяет регулярное выражение, по которому проверяются вводимые данные.

Атрибут pattern работает со следующими типами элемента <input>: text, search, url, tel, email, password.

Атрибут pattern для тега <input> был добавлен в HTML5.

Синтаксис

<input pattern=»regexp«>

Значения атрибута

ЗначениеОписание
regexpРегулярное выражение, по которому проверяются вводимые данные

Некоторые типовые регулярные выражения:

ВыражениеОписание
\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-адрес

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

HTML форма с текстовым полем, которое может содержать только три буквы (без цифр и специальных символов):


<form action="//msiter.ru/demo_form.asp">
   Код страны: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Трехбуквенный код страны">
   <input type="submit">
</form>

Атрибут pattern | HTML | WebReference

Указывает регулярное выражение, согласно которому требуется вводить и проверять данные в поле формы. Если присутствует атрибут pattern, то форма не будет отправляться, пока поле не будет заполнено правильно.

Синтаксис

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

Значения

Некоторые типовые регулярные выражения перечислены в табл. 1.

Табл. 1. Регулярные выражения
ВыражениеОписание
\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-адрес

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Атрибут pattern</title>
 </head>
  <body>
   <form action="handler.php">
    <p>Введите телефон в формате 2-xxx-xxx, где вместо x 
    должна быть цифра:</p>
    <p><input type="tel" pattern="2-[0-9]{3}-[0-9]{3}"></p>
    <p><input type="submit" value="Отправить"></p>
   </form>
  </body>
</html>

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 08.11.2016

Редакторы: Влад Мержевич

Курс по вёрстке сайта на CSS Grid

Атрибут pattern тега | HTML справочник

HTML тег <input>

Значение и применение

Атрибут pattern (HTML тега <input>) задает регулярное выражение, которое сверяется со значением введёным в элементе. Синтаксис регулярного выражения соответствует языку JavaScript. Только для элементов управления следующих типов: text, search,tel,url,email и password (остальные игнорируются).

Если вы планируете использовать регулярные выражения, то обязательно используйте глобальный HTML атрибут title, введенная в нем информация будет отображена пользователю, если введеное в элемент значение не будедт удовлетворять шаблону, указанному в регулярном выражении (пример ниже).

Подробную информацию о регулярных выражениях в JavaScript вы можете найти на сайте Mozilla Developer Network.

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

Синтаксис:

<input pattern = "regexp">

Значения атрибута

ЗначениеОписание
regexpОпределяет регулярное выражение, которое сопостовляет значение, введеное в элемент управления с шаблоном, установленным в выражении.

Отличия HTML 4.01 от HTML 5

Атрибут pattern считается новым в HTML 5.

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование атрибута pattern HTML тега <input></title>
	</head>
	<body>
		<form> <!-- создаем форму -->
			<label>Ваш логин<input type = "text" name = "login" pattern = "[A-Za-z0-9]{6,}" title = "Логин не может быть короче шести латинских символов."></label><br> <!-- поле для ввода текстовой информации -->
			<label>Ваш пароль<input type = "password" name = "pswd" pattern = "(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}" title = "Пароль не может быть короче восьми символов и должен содержать хотя бы одну цифру, одну маленькую и одну большую латинскую букву."></label><br> <!-- поле для ввода пароля -->
			<input type = "submit" value = "регистрация"> <!-- кнопка для отправки формы -->
		</form>
	</body>
</html>

В данном примере мы создали форму (HTML тег <form>). Внутри формы мы поместили три элемента управления <input>, которые позволяют ввести текстовую информацию, указать пароль и отправить нашу форму.

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

Обратите внимание, что если значение не совпадает с шаблоном, то пользователь увидит информацию, находящуюся внутри глобального HTML атрибута title.

Результат нашего примера:

Пример использования атрибута pattern HTML тега <input>HTML тег <input>

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *