Поле для телефона



Влад Мержевич

Чтобы указать телефонный номер используйте для этого специальное поле. По своему виду и работе оно совпадает с текстовым полем. Синтаксис создания этого поля следующий.

<input type="tel" атрибуты>

Атрибуты полностью совпадают с текстовым полем.

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

Создание поля для телефона показано в примере 1. Требуется ввести телефон в указанном формате, иначе браузер выведет сообщение об ошибке и не станет отправлять форму, пока поле не будет заполнено корректно.

Пример 1. Поле для телефона

HTML5IE 10+CrOpSaFx

<!DOCTYPE html>
 <html>
  <head>
  <meta charset="utf-8">
  <title>Телефон</title>
 </head>
 <body>
  <form>
   <p>Ваше имя: <input name="login"></p>
   <p>Телефон в формате 2xxx-xxx:  <input type="tel" name="tel" 
   pattern="2[0-9]{3}-[0-9]{3}"></p>
   <p><input type="submit" value="Отправить"></p>
  </form>
 </body>
</html>

Результат примера при вводе неправильного телефона показан на рис. 1.

Ввод телефона в браузере Chrome

Рис. 1. Ввод телефона в браузере Chrome

Браузеры IE и Safari не поддерживают этот вид поля и соответственно не делают проверку на шаблон телефона.

HTML по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.