Input html pattern: Атрибут pattern | htmlbook.ru

Leave a Comment / Html / By /

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

HTML тег <input>

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

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

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

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

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

Атрибут
Chrome
Firefox
Opera
Safari
IExplorer
Edge
patternДаДаДаДа10. 0Да

Синтаксис:

<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>

HTML pattern Attribute

<HTML <input> Тег

пример

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

<form action=»demo_form.asp»>
Country code: <input type=»text» name=»country_code»
pattern=»[A-Za-z]{3}» title=»Three letter country code»>
<input type=»submit»>
</form>

Попробуй сам «

Больше «Попробуйте сами» примеры ниже.

Определение и использование

pattern атрибут определяет регулярное выражение , что <input> значение элемента проверяется.

Примечание: pattern атрибут работает со следующими типами ввода: text, date, search, url, tel, email и password .

Совет: Используйте глобального title атрибут для описания шаблона , чтобы помочь пользователю.

Подсказка: Узнайте больше о регулярных выражениях в нашем JavaScript учебнике.

Поддержка браузеров

Числа в таблице указать первую версию браузера, который полностью поддерживает атрибут.

Атрибут
pattern 5.0 10,0 4.0 Не поддерживается 9.6

Отличия между HTML 4.01 и HTML5

pattern атрибута является новым в HTML5.

Синтаксис

<input pattern=»regexp«>

значения атрибутов

Стоимость Описание
regexp Задает регулярное выражение , что <input> значение элемента проверяется

Еще примеры

пример

<input> элемент с type=»password» , который должен содержать не менее 6 символов:

<form action=»demo_form. asp»>
Password: <input type=»password» name=»pw» pattern=».{6,}» title=»Six or more characters»>
<input type=»submit»>
</form>

Попробуй сам «


пример

<input> элемент с type=»password» , который должен содержать 8 или более символов, которые , по крайней мере , один номер и один прописных и строчных букв:

<form action=»demo_form.asp»>
Password: <input type=»password» name=»pw» pattern=»(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}» title=»Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters»>

<input type=»submit»>
</form>

Попробуй сам «


пример

<input> элемент с type=»email» , который должен быть в следующем порядке: символы @ символов. доменов (символы следуют символ @, за которым следует более символов, а затем «. ‘\x22]+» title=»Invalid input»>
<input type=»submit»>
</form>

Попробуй сам «


пример

<input> элемент с type=»url» , который должен начинаться с http:// или https:// следует , по крайней мере , один символ:

<form action=»demo_form.asp»>
Homepage: <input type=»url» name=»website» pattern=»https?://.+» title=»Include http://»>

<input type=»submit»>
</form>

Попробуй сам «

<HTML <input> Тег

Атрибут шаблона для полей ввода

Могу ли я использовать

Поиск

?

Атрибут шаблона для полей ввода

— ЛС

  • Глобальное использование
    98,38% + 0,16% знак равно 98,54%

Позволяет проверять поле ввода на основе заданного шаблона регулярного выражения.

Хром
  1. 4 — 9: Not supported
  2. 10 — 107: Supported
  3. 108: Supported
  4. 109 — 111: Supported
Edge
  1. 12 — 107: Supported
  2. 108: Supported
Safari
  1. 3.1 — 4: Not supported
  2. 5: Support unknown
  3. 5.1 — 10: Partial support
  4. 10.1 — 16.1: Supported
  5. 16.2: Supported
  6. 16.3 — TP: Supported
Firefox
  1. 02% — Not supported»> 2 — 3,6: не поддерживается
  2. 4 — 106: Поддерживается
  3. 107: Поддерживается
  4. 108 — 109: Поддерживается
Opera
  1. 9: не поддержано
  2. 9.5 —
  15. 68% — Supported»>
  30. : не поддерживается
  31. 9001:
    2. :
    IE
    1. 5.5 — 9: Not supported
    2. 01% — Supported»> 10: Supported
    3. 11: Supported
    Chrome for Android
    1. 108: Supported
    Safari on iOS
    1. 3.2 — 4.3: Support unknown
    2. 5 — 10.2: Partial support
    3. 10.3 — 16.1: Supported
    4. 16.2: Supported
    5. 16.3: Supported
    Samsung Internet
    1. 4 — 18.0: Supported
    2. 19.0: Supported
    Opera Mini
    1. все: не поддерживается
    Opera Mobile
    1. 10–12. 1: поддерживается
    2. 72: поддерживается
    UC Browser для Android
    1. 13.4: поддерживается0013 Browser Android
      1. 2,1 — 4,4: не поддерживается
      2. 4.4.3: Поддерживается
      3. 108: Поддерживается
      Firefox для Android
      1. 107: Поддержка
      QQ QQ QQ QQ QQ QQ QQ QQ QQ QQ QQ QQ QQ QQ QQ QQ QQ QQ QQ QQ QQ QQ QQ QQ QQ QQ QQ QQ QQ QQ QQ QQ
      1. . Браузер Baidu
        1. 13.18: Поддерживается
        Браузер KaiOS
        1. 2.5: Поддерживается
        Ресурсы:
        0173
        Сайт с общими примерами шаблонов

        html — Как использовать шаблон на входе[type=»number»]?

        спросил

        Изменено 7 лет, 1 месяц назад

        Просмотрено 10 тысяч раз

        Я хочу, чтобы значение по умолчанию было равно 0, и перекрасить ввод, если оно больше 0, используя 9[1-9]\d*$» type=»text» value=»0″ />

        • html
        • css
        • validation
        • input

        Ссылка MDN на свойство pattern (выделение добавлено) :

        узор

        Регулярное выражение, по которому проверяется значение элемента управления. Шаблон должен соответствовать всему значению, а не только некоторому подмножеству. Использовать атрибут title для описания шаблона, чтобы помочь пользователю. Это атрибут применяется, когда значением атрибута type является текст, поиск, тел, URL или электронная почта; в противном случае он игнорируется. Обычный язык выражений такой же, как в JavaScript. Шаблон не окруженный косой чертой.

        Интересно, что я не могу найти упоминания об этом ни в стандартах W3C, ни в WhatWG.

        3

        Я вижу, что если вы дадите минимальное значение 1, цвет не будет зеленым для 0. Цвет изменится на зеленый, когда вы введете 1. Я думаю, это то, что вы ожидаете, верно?

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

        Здесь есть одно ограничение.

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

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