Значение tel
Синтаксис
<input type="tel">
Описание
Тип tel
(от англ. "telephone" ‒ «телефон») создаёт поле ввода телефонного номера.
Внешний вид
‒ телефонное поле;
‒ наведение курсора;
‒ фокус.
Примечание
HTML спецификация не устанавливает определённый синтаксис телефонного номера для данного поля (в отличие от «url
» и «email
» полей). Это сделано намеренно, так как на практике, поля телефонных номеров, как правило, имеют свободную форму, потому что существует большое разнообразие допустимых телефонных номеров. (Установить необходимый синтаксис телефонного номера можно с помощью атрибута «pattern
».)
Поддержка браузерами
Спецификация
Верс. | Раздел |
---|---|
HTML | |
2.0 | |
3.2 | |
4.01 | |
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 | |
1.1 |
Сопутствующие атрибуты
- autocomplete
- Автозаполнение значения поля телефона.
- autofocus
- Автоматческая фокусировка на телефонном поле после полной загрузки страницы.
- disabled
- Блокировка поля телефона.
disabled="disabled"
- form
- Присоединение телефонного поле к форме.
- list
- Создание списка рекомендованных вариантов телефонных номеров.
- maxlength
- Задаёт максимально-допустимое количество вводимых символов.
- minlength
- Задаёт минимально-допустимое количество вводимых символов.
- name
- Присваивает имя телефонному полю.
- pattern
- Устанавливает критерий/шаблон ввода.
- placeholder
- Указывает текст-подсказку для пустого поля.
placeholder="Текст-подсказка"
- readonly
- Указывает, что поле телефона доступно только для чтения (изменение/редактирование запрещено).
- required
- Указывает, что поле телефона обязательно для заполнения.
- size
- Задаёт ширину телефонного поля по количеству вводимых символов.
size="10"
- value
- Указывает значение телефонного поля (отправляется на сервер или используется скриптами).
Примечание: Данный атрибут должен иметь значение, которое не содержит символов «LF» ПЕРЕВОД СТРОКИ [
U+000A
] или «CR» ВОЗВРАТ КАРЕТКИ [U+000D
].value="+7 (900) 123-45-67"
- Глобальные атрибуты
- accesskey, class, contenteditable, data-*, dir, draggable, dropzone, id, inert, lang, spellcheck, style, tabindex, title, translate, xml:lang
Пример использования
<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>