Характеристики атрибута
В каких браузерах работает?
| 10.0+ | 5.0+ | 9.6+ | - | 4.0+ | 2.3+ | 3.0+ |
В каких спецификациях используется?
| HTML | - | - | 5.0 |
| XHTML | - | - |
Для чего используется?
Прописывает шаблон для заполнения поля, который контролирует правильность заполнения поля. Причем форму нельзя будет отправить, пока поле не будет заполнено соответственно шаблону.
Как правильно задавать?
<input type="email" pattern="выражение"> <input type="tel" pattern="выражение"> <input type="text" pattern="выражение"> <input type="search" pattern="выражение"> <input type="url" pattern="выражение">
Какие значения могут быть записаны в атрибут?
Возможные комбинации значений указаны в таблице
| Кодировка | Расшифровка |
| \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})? | Десятичная дробь с двумя знаками после запятой |
| \d+(\.\d{2})? | Десятичная дробь с двумя знаками после точки |
| \d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3} | Адрес IP |
В каких тегах применяется?
Применяется только в input.
Пример использования
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Атрибут pattern</title> </head> <body> <form> <p>Запишите номер телефона в формате =38 (0хх) ххх-хх-хх:</p> <p><input type="tel" pattern="38 (0[0-9]{2})\s[0-9]{3}-[0-9]{2}-[0-9]{2}"></p> <p><input type="submit" value="Выслать"></p> </form> </body> </html>
Тип HTML атрибута:
Прочие