/html/input/type/tel:> Поле ввода телефонного номера_

Значение tel

Синтаксис

HTML
<input type="tel">

Описание

Тип tel (от англ. "telephone" ‒ «телефон») создаёт поле ввода телефонного номера.

Внешний вид

  • Внешний вид телефонного поля ‒ телефонное поле;
  • Внешний вид телефонного поля с наведённым на него курсором ‒ наведение курсора;
  • Внешний вид телефонного поля с фокусом ‒ фокус.

Примечание

HTML спецификация не устанавливает определённый синтаксис телефонного номера для данного поля (в отличие от «url» и «email» полей). Это сделано намеренно, так как на практике, поля телефонных номеров, как правило, имеют свободную форму, потому что существует большое разнообразие допустимых телефонных номеров. (Установить необходимый синтаксис телефонного номера можно с помощью атрибута «pattern».)


Поддержка браузерами

Chrome
Поддерж.
Firefox
Поддерж.
Opera
Поддерж.
Maxthon
Поддерж.
IExplorer
Поддерж.
Safari
Поддерж.
iOS
Поддерж.
Android
Поддерж.

Спецификация

Верс. Раздел
HTML
2.0 Input Field: INPUT
3.2 INPUT text fields, radio buttons, check boxes, ...
4.01 17.4.1 Control types created with INPUT
5.0 4.10.5.1.3 Telephone state (type=tel)
5.1 4.10.5.1.3. Telephone state (type=tel)
XHTML
1.0 Extensible HyperText Markup Language
1.1 Extensible HyperText Markup Language

Сопутствующие атрибуты

autocomplete
Автозаполнение значения поля телефона.
autofocus
Автоматческая фокусировка на телефонном поле после полной загрузки страницы.
disabled
Блокировка поля телефона.

Внешний вид заблокированного телефоного поля disabled="disabled"

form
Присоединение телефонного поле к форме.
list
Создание списка рекомендованных вариантов телефонных номеров.

Внешний вид телефоного поля c вариантами телефонных номеров

maxlength
Задаёт максимально-допустимое количество вводимых символов.
minlength
Задаёт минимально-допустимое количество вводимых символов.
name
Присваивает имя телефонному полю.
pattern
Устанавливает критерий/шаблон ввода.
placeholder
Указывает текст-подсказку для пустого поля.

Внешний вид телефонного поля c текстом-подсказкой placeholder="Текст-подсказка"

readonly
Указывает, что поле телефона доступно только для чтения (изменение/редактирование запрещено).
required
Указывает, что поле телефона обязательно для заполнения.
size
Задаёт ширину телефонного поля по количеству вводимых символов.

Внешний вид телефонного поля шириной в 10 символов size="10"

value
Указывает значение телефонного поля (отправляется на сервер или используется скриптами).

Примечание: Данный атрибут должен иметь значение, которое не содержит символов «LF» ПЕРЕВОД СТРОКИ [U+000A] или «CR» ВОЗВРАТ КАРЕТКИ [U+000D].

Внешний вид телефонного поля с введённым значением value="+7 (900) 123-45-67"

Глобальные атрибуты
accesskey, class, contenteditable, contextmenu, data-*, dir, draggable, dropzone, hidden, id, inert, lang, spellcheck, style, tabindex, title, translate, xml:lang

Пример использования

Листинг кода
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Значение tel (input-type)</title>
</head>
<body>
<h1>Пример с полем ввода телефонного номера "type=tel"</h1>
<form action="/examples/php-scripts/telephone.php" method="post">
<fieldset> <legend>Введите ваш номер телефона</legend>
<p><input type="tel" name="phone_number" list="tel-list" placeholder="+7 (900) 123-45-67" pattern="\+7\s?[\(]{0,1}9[0-9]{2}[\)]{0,1}\s?\d{3}[-]{0,1}\d{2}[-]{0,1}\d{2}"></p>
<datalist id="tel-list">
<option value="+7 (900) 123-45-67" label="Телефонный номер №1">
<option value="+7 (900) 123-45-68" label="Телефонный номер №2">
</datalist>
</fieldset>
<p><input type="reset"> <input type="submit"></p>
</form>
</body>
</html>
Значение tel (input-type)