How to Create a Telephone Input Field in HTML5
Though field validation and data formatting are the biggest challenges of working with web browsers, HTML5 does some help in enforcing this for us.
Telephone input field can be created using type=”tel”:
input type="tel" name="phone_num" id="phone_num"/> This looks like every other input field, with the difference that it optimizes the keyboard. Certain platforms like tablets, or smartphones will pop-up only-numeric keyboard for this input field.
It is hard to enforce particular regular expression through HTML because of variety of phone number formats used along with differences in country codes, and number separators. It remains the sole responsibility of the developer to implement these checks through JavaScript or other library function.
For example, here is the pattern for common USA phone format: [+]\d[(]\d[)]\d[-]\d
you can apply this format using the pattern attribute:
input type="tel" name="phone_num" id="phone_num" pattern="[\+]\d[\(]\d[\)]\d[\-]\d" /> This page has some more examples for phone number patterns in different regions
tel input type is currently supported in all major modern browsers. The full numeric keypad makes a great user experience.
See Also
Значение tel
Тип tel (от англ. » tel ephone» ‒ «телефон») создаёт поле ввода телефонного номера.
Внешний вид
‒ телефонное поле;- ‒ наведение курсора;
- ‒ фокус.
‒ телефонное поле;
‒ наведение курсора;
‒ фокус.Примечание
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″