Атрибут шаблона HTML <input>
Пример
HTML-форма с полем ввода, которое может содержать только три буквы (без цифр и специальных символов):
<form action="/action_page.php">
<label for="country_code">Country code:</label>
<input
type="text" id="country_code" name="country_code"
pattern="[A-Za-z]{3}"
title="Three letter country code"><br><br>
<input type="submit">
</form>
Другие примеры «Попробуйте сами» ниже.
Определение и использование
Атрибут patternуказывает регулярное выражение, по которому
<input>проверяется значение элемента при отправке формы.
Примечание . patternАтрибут работает со следующими типами ввода: текст, дата, поиск, URL-адрес, телефон, электронная почта и пароль.
Совет: Используйте глобальный titleатрибут для описания шаблона, чтобы помочь пользователю.
Совет: Узнайте больше о регулярных выражениях в нашем руководстве по JavaScript.
Поддержка браузера
Цифры в таблице указывают на первую версию браузера, которая полностью поддерживает этот атрибут.
| Attribute | |||||
|---|---|---|---|---|---|
| pattern | 5.0 | 10.0 | 4.0 | 10.1 | 9.6 |
Синтаксис
<input pattern="regexp">
Значения атрибутов
| Value | Description |
|---|---|
| regexp | Specifies a regular expression that the <input> element's value is checked against |
Дополнительные примеры
Пример
Элемент <input> с type="password", который должен содержать 8 или более символов:
<form action="/action_page.php">
<label for="pwd">Password:</label>
<input type="password" id="pwd"
name="pwd"
pattern=".{8,}" title="Eight or more characters">
<input type="submit">
</form>
Пример
Элемент <input> с типом = «пароль», который должен содержать 8 или более символов, состоящих как минимум из одной цифры и одной прописной и строчной буквы:
<form action="/action_page.php">
<label for="pwd">Password:</label>
<input type="password" id="pwd" name="pwd"
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> с типом = «email», который должен быть в следующем порядке: символы @ символы . домен (символы, за которыми следует знак @, за которым следуют другие символы, а затем «.»
После "." знак, добавьте не менее 2 букв от а до я:
<form action="/action_page.php">
<label
for="email">Email:</label>
<input type="email" id="email" name="email"
pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
<input type="submit">
</form>
Пример
Элемент <input> с type="search", который НЕ МОЖЕТ содержать следующие символы: ' или "
<form action="/action_page.php">
<label
for="search">Search:</label>
<input type="search" id="search" name="search"
pattern="[^'\x22]+" title="Invalid input">
<input type="submit">
</form>
Пример
Элемент <input> с type="url", который должен начинаться с http:// или https://, за которым следует хотя бы один символ:
<form action="/action_page.php">
<label
for="website">Homepage:</label>
<input type="url" id="website"
name="website"
pattern="https?://.+" title="Include http://">
<input type="submit">
</form>
❮ HTML-тег <input>