Traditionally HTML forms have a limited set of options, sometimes enhanced with JavaScript, largely based around generic text inputs.  With the new numeric inputs introduced by HTML5, the browser now has native support for many typical form features, including phone numbers:

tel input

Takes a telephone number as an input.

<label for="phone">Phone number:</label>
<input name="phone" id="phone" type="tel">

There are a few things to note about the input:

• For obvious reasons, the tel input cannot confirm that the number entered by the user is their actual number.
• However, browsers with auto-fill form options (that is, all of the popular browsers in current use) are more likely to automatically recognize, and correctly complete, the tel input for users, saving time for users.
• Another significant UX advantage of the tel input is that mobile browsers will switch to a numeric display keypad when the input has focus.
• tel does not attempt to validate the phone number, since they come in many different possible configurations: you must define a validation pattern for that in HTML. A simple example (7 digits, no punctuation or spaces, must begin with a number greater than 1) would be:

<label for="phone">Phone number:</label>
<input name="phone" id="phone" type="tel" pattern="[2-9][0-9]{6}">

Photograph by Jan-Hendrik Caspers, used under a Creative Commons Attribution-ShareAlike 2.0 license

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.