MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

<input type="tel">

Draft
This page is not complete.

<input> elements of type "tel" let the user enter or edit a phone number which is represented in elements value.

<input id="phoneNumber" type="tel">

 

Value A DOMString representing the phone number
Events change and input
Supported Common Attributes required, autocomplete, pattern
IDL attributes value
Methods select(), setRangeText(), setSelectionRange()

Value

The <input> element's value attribute's value contains a DOMString which can be in any format. There are two possible value formats that will pass validation:

  1. An empty string ("") indicating that the user did not enter a value or that the value was removed.
  2. Text without linebreaks. These are characters like "LF" LINE FEED (U+000A) or "CR" CARRIAGE RETURN (U+000D).

No syntax validation is done like with email or url type inputs. Validation can be added  via pattern attribute or setCustomValidity() method.

Validation

There is no validation provided because of the varying formats. So, it is possible to add any text as long as there are no new line characters in there. It is up to yourself to format which would will make sense for your use.

Pattern Validation

By adding pattern with a valid regexp you can enforce desired format. While it will provide you with desired results most of the time, you still need to do validation on your back-end. Not all of the requests will come directly from form submission and forms still can be tampered with.

[insert example here]

Specifications

Specification Status Comment
HTML Living Standard
The definition of '<input type="tel">' in that specification.
Living Standard Initial definition
HTML 5.1
The definition of '<input type="tel">' in that specification.
Recommendation Initial definition

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Basic support ? ? Unknown (4.0) ? ? ?
Feature Android Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile iOS WebKit
(Safari/Chrome/Firefox/etc)
Basic support ? ? ? ? ? ? ?

Document Tags and Contributors

 Contributors to this page: Tomche, escattone
 Last updated by: Tomche,