< input > элементы type tel используются для того, чтобы пользователь мог вводить и редактировать телефонный номер. В отличие от < input type="email" > и < input type="url" > , входное значение не проверяется автоматически на соответствие определенному формату перед отправкой формы, поскольку форматы телефонных номеров сильно различаются по всему миру.

Несмотря на то, что вводы типа tel функционально идентичны стандартным text вводам, они служат полезным целям; наиболее очевидным из них является то, что мобильные браузеры — особенно на мобильных телефонах — могут отображать настраиваемую клавиатуру, оптимизированную для ввода телефонных номеров. Использование определенного типа ввода для телефонных номеров также делает добавление пользовательской проверки и обработки телефонных номеров более удобными.

Одним из основных преимуществ < input type="tel" > является то, что мобильные браузеры отображают специальную клавиатуру для ввода телефонных номеров.

Иногда полезно предложить контекстную подсказку о том, какую форму должны принимать входные данные. Это может быть особенно важно, если дизайн страницы не предлагает описательных меток для каждого файла < input > . Здесь на помощь приходят заполнители. Заполнитель — это значение, которое демонстрирует форму, value которую оно должно принимать, представляя пример действительного значения, которое отображается внутри поля редактирования, когда элемент value имеет значение "". После ввода данных в поле заполнитель исчезает; если поле пусто, местозаполнитель появляется снова.

Здесь у нас есть tel ввод с заполнителем 123-4567-8901. Обратите внимание, как заполнитель исчезает и появляется снова, когда вы манипулируете содержимым поля редактирования.

Физический размер поля ввода можно контролировать с помощью size атрибута. С его помощью вы можете указать количество символов, которое поле ввода может отображать за раз. Например, в этом примере поле tel редактирования имеет ширину 20 символов:

Это size отдельно от ограничения длины введенного телефонного номера. Вы можете указать минимальную длину в символах для введенного номера телефона с помощью minlength атрибута; аналогичным образом используйте maxlength для установки максимальной длины вводимого телефонного номера.

В приведенном ниже примере создается поле ввода телефонного номера шириной 20 символов, требующее, чтобы содержимое было не короче 9 и не длиннее 14 символов.

Сделав еще один шаг, вы можете предоставить список значений телефонных номеров по умолчанию, из которых пользователь может выбирать. Для этого используйте list атрибут. Это не ограничивает пользователя этими вариантами, но позволяет ему быстрее выбирать часто используемые телефонные номера. Это также предлагает подсказки для autocomplete . Атрибут list указывает идентификатор < datalist > элемента, который, в свою очередь, содержит по одному < option > элементу на предлагаемое значение; каждый является соответствующим предлагаемым значением option для value поля ввода телефонного номера.

Как мы уже упоминали ранее, довольно сложно предоставить универсальное решение для проверки телефонных номеров на стороне клиента. Так что мы можем сделать? Рассмотрим некоторые варианты.

Вы можете сделать так, чтобы пустой ввод был недействительным и не был отправлен на сервер с использованием required атрибута. Например, давайте использовать этот HTML:

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

В этом примере мы будем использовать тот же CSS, что и раньше, но наш HTML будет выглядеть следующим образом:

Обратите внимание, что введенное значение сообщается как недопустимое, если только шаблон xxx-xxx-xxxx не соответствует; например, 41-323-421 не будет принят. Не будет и 800-MDN-ROCKS. Тем не менее, 865-555-6502 будет принят. Этот конкретный шаблон, очевидно, полезен только для определенных локалей — в реальном приложении вам, вероятно, придется варьировать используемый шаблон в зависимости от локали пользователя.