How To Create A Telephone Input Field In HTML5 - HTML Form Guide

Trang chủ » Html A Tel Format » How To Create A Telephone Input Field In HTML5 - HTML Form Guide

Có thể bạn quan tâm

  • Home
  • HTML5 Forms
How to Create a Telephone Input Field in HTML5 HTML5 html5 tel input type html5 telephone input field

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{2}[(]\d{2}[)]\d{4}[-]\d{4}

you can apply this format using the pattern attribute:

<input type="tel" name="phone_num" id="phone_num" pattern="[\+]\d{2}[\(]\d{2}[\)]\d{4}[\-]\d{4}" />

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

  • How to Use Html5 Input Type Email
  • How to get checkbox value in form submission

Categories

  • Calculation Forms
  • HTML Forms
  • PHP Form Handling
  • Form Action
  • Contact Forms
  • Code Snippets
  • Best Practices
  • HTML5 Forms
  • Form Widgets
  • jQuery Form Handling
  • Email Forms
  • Form Mail
  • Web Forms
  • Checkboxes
  • File Upload
  • Google Forms

Từ khóa » Html A Tel Format