Логотип schoolsw3.com
Учебники Справочники Упражнения КАК? Меню
ЯМаркет
Редактор Поддержка Форум

×
Учебники
Справочники
Упражнения
Пожертвовать Обновление Реклама Видео Магазин

HTML Справочник

HTML Теги по алфавиту HTML Теги по категориям HTML Поддержка браузера HTML Атрибуты тегов HTML Глобальные атрибуты HTML События атрибутов HTML Название цвета HTML Canvas HTML Аудио/видео HTML Наборы символов HTML Типы документов HTML URL Кодировка HTML Код языка HTML Код страны HTTP Сообщения ошибок HTTP Методы GET/POST HTML Конвертер PX в EM HTML Комбинация клавиш

HTML Теги

Тег <!--Комментарий--> Тег <!DOCTYPE> Тег <a> Тег <abbr> Тег <acronym> Тег <address> Тег <applet> Тег <area> Тег <article> Тег <aside> Тег <audio> Тег <b> Тег <base> Тег <basefont> Тег <bdi> Тег <bdo> Тег <big> Тег <blockquote> Тег <body> Тег <br> Тег <button> Тег <canvas> Тег <caption> Тег <center> Тег <cite> Тег <code> Тег <col> Тег <colgroup> Тег <data> Тег <datalist> Тег <dd> Тег <del> Тег <details> Тег <dfn> Тег <dialog> Тег <dir> Тег <div> Тег <dl> Тег <dt> Тег <em> Тег <embed> Тег <fieldset> Тег <figcaption> Тег <figure> Тег <font> Тег <footer> Тег <form> Тег <frame> Тег <frameset> Тег <h1> - <h6> Тег <head> Тег <header> Тег <hr> Тег <html> Тег <i> Тег <iframe> Тег <img> Тег <input> Тег <ins> Тег <kbd> Тег <label> Тег <legend> Тег <li> Тег <link> Тег <main> Тег <map> Тег <mark> Тег <meta> Тег <meter> Тег <nav> Тег <noframes> Тег <noscript> Тег <object> Тег <ol> Тег <optgroup> Тег <option> Тег <output> Тег <p> Тег <param> Тег <picture> Тег <pre> Тег <progress> Тег <q> Тег <rp> Тег <rt> Тег <ruby> Тег <s> Тег <samp> Тег <script> Тег <section> Тег <select> Тег <small> Тег <source> Тег <span> Тег <strike> Тег <strong> Тег <style> Тег <sub> Тег <summary> Тег <sup> Тег <svg> Тег <table> Тег <tbody> Тег <td> Тег <template> Тег <textarea> Тег <tfoot> Тег <th> Тег <thead> Тег <time> Тег <title> Тег <tr> Тег <track> Тег <tt> Тег <u> Тег <ul> Тег <var> Тег <video> Тег <wbr>


HTML Тег <input> атрибут pattern


❮ HTML Тег <input>


Пример

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

<form action="/action_page.php">
  <label for="country_code">Код страны:</label>
  <input type="text" id="country_code" name="country_code"
  pattern="[A-Za-z]{3}" title="Трехбуквенный код страны"><br><br>
  <input type="submit">
</form>
Попробуйте сами »


Определение: Тег <input> атрибут pattern

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

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

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

Совет: Узнайте больше о регулярные выражения в учебнике по JavaScript.


Поддержка: Тег <input> атрибут pattern

Цифры в таблице указывают первую версию браузера, которая полностью поддерживает этот атрибут.

Атрибут
pattern 5.0 10.0 4.0 10.1 9.6

Синтаксис: Тег <input> атрибут pattern

<input pattern="regexp">

Значение: Тег <input> атрибут pattern

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

Примеры: Тег <input> атрибут pattern

Пример

Элемент <input> с type="password", который должен содержать 8 или более символов:

<form action="/action_page.php">
  <label for="pwd">Пароль:</label>
  <input type="password" id="pwd" name="pwd"
  pattern=".{8,}" title="Восемь или более символов">
  <input type="submit">
</form>
Попробуйте сами »
Пример

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

<form action="/action_page.php">
  <label for="pwd">Пароль:</label>
  <input type="password" id="pwd" name="pwd"
  pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
  title="Должен содержать не менее одной цифры, одной прописной и строчной буквы, а также не менее 8 и более символов">
  <input type="submit">
</form>
Попробуйте сами »
Пример

В элементе <input> с type="email" должен быть в следующем порядке: characters@characters.domain (символы, за которыми следует знак @, а затем еще несколько символов, а затем "."

После знака ".", нужно добавить по крайней мере 2 буквы от a до z:

<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">Поиск:</label>
  <input type="search" id="search" name="search"
  pattern="[^'\x22]+" title="Неверный ввод">
  <input type="submit">
</form>
Попробуйте сами »
Пример

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

<form action="/action_page.php">
  <label for="website">Домашняя страница:</label>
  <input type="url" id="website" name="website"
  pattern="https?://.+" title="Включить http://">
  <input type="submit">
</form>
Попробуйте сами »

❮ HTML Тег <input>