<input type="tel">
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Элементы <input> с типом tel используются для ввода телефонных номеров. В отличие от <input/email> и <input/url> вводимое значение не проходит автоматическую валидацию перед отправкой формы, поскольку форматы телефонных номеров сильно различаются по всему миру.
Интерактивный пример
<label for="phone">
Enter your phone number:<br />
<small>Format: 123-456-7890</small>
</label>
<input
type="tel"
id="phone"
name="phone"
pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
required />
label {
display: block;
font:
1rem "Fira Sans",
sans-serif;
}
input,
label {
margin: 0.4rem 0;
}
Несмотря на то, что поля ввода tel функционально идентичны обычным полям ввода с типом text, они приносят пользу: например, браузеры мобильных телефонов могут предоставлять для таких полей специальную клавиатуру, оптимизированную для ввода телефонных номеров. Использование специального поля ввода для телефонных номеров также упрощает реализацию их проверки и обработки.
Примечание:
Браузеры, не поддерживающие тип tel, будут отображать обычное поле ввода <input/text>.
Значение
Спецификации
| Specification |
|---|
| HTML # telephone-state-(type=tel) |