Введите ваш адрес почты


sdcvoy.ru
Понравился сайт? Поделись с друзьями!
Главная » Html5 » Atribut-pattern-autocomplete

Атрибут pattern

Атрибут pattern позволяет создавать регулярные выражения, согласно которым требуется вводить и проверять данные в поле формы. То есть вы сами можете изменять значения полей которые вы хотите изменить.
Синтаксис имеет следующий вид:

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

Давайте рассмотрим небольшой пример использования данного атрибута:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Атрибут pattern</title>
   <style>
  .forma {
	  display:block;
	  position:relative;
	  top:30%;
	  left:30%;
	  background:#CCC;
	  border:1px solid #666;
	  width:40%;
	  padding-left:10px}
  </style>
 </head>
 <body>
  <form action="pochta.php" class="forma">
   <p>Введите почтовый индекс:</p>   
   <p><input required pattern="[0-9]{6}" name="index"></p>
   <p>Введите ваше имя, пожалуйста:</p>
   <p><input name="user" required placeholder="Ваше имя"></p>
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

В результате вы получите форму для ввода почтового индекса:

pattern в html5

Чтобы вам легче было использовать регулярные выражения в HTML5 я приведу некоторые из них:

Выражение Описание
\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})? Число в формате 2,4 (разделитель запятая).
\d+(\.\d{2})? Число в формате 5.72 (разделитель точка).
\d{1,3}\.\d{1,3}\.\d{1,3}\.\d{1,3} IP-адрес

Атрибут autocomlete

Этот атрибут позволяет включать и отключать автозаполнение полей форм.

Синтаксис имеет следующий вид:
<input autocomplete="on | off">

При вводе первых букв или значений браузер автоматически предложит ввести значения, которые вводились до этого, если значение атрибута on. Например, если вы хотите скрыть какие-нибудь данные, то лучше использовать значение off. Предлагаю рассмотреть небольшой пример:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Атрибут autocomplete</title>
   <style>
  .forma {
	  display:block;
	  position:relative;
	  top:30%;
	  left:30%;
	  background:#CCC;
	  border:1px solid #666;
	  width:40%;
	  padding-left:10px}
  </style>
 </head>
 <body>
  <form action="pochta.php" class="forma">
   <p>Введите почтовый индекс:</p>   
   <p><input required pattern="[0-9]{6}" name="index"></p>
   <p>Введите ваше имя, пожалуйста:</p>
   <p><input name="user" required placeholder="Ваше имя"
 autocomplete="on"></p>
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

В результате должно получиться следующее:

autocomplete в html5

Как я и говорил выше, если вы не хотите чтобы браузер отображал заранее введенные значения достаточно поменять on на off.



наверх