Summary -

In this topic, we described about the Tel Input type with detailed example.

The tel input type used for entering a telephone number. Browsers don't support tel input validation natively. Though, we can use the placeholder attribute to support clients in submitting the correct format for a phone number or specify a regular expression to authenticate the user input using the pattern attribute.

Syntax -

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

Example

Below example to explains how to code input field of type telephone number - 

<!DOCTYPE html>
 <html lang="en">
<head>
     <title>HTML5 Tel Input Type</title>
       <script>
          function getValue() {
          var phone = document.getElementById("myphone").value;
          alert(phone);
        } 
       </script>
</head>       
  <body>                      
    <form>                        
      <label for="myphone">Telephone Number:</label>
      <input type="tel" id="myphone" placeholder="xxxxxxxxxx" required>
      <button type="button" onclick="getValue();">Get Value</button>
   </form>
</body> 
</html>

Output

Note! The validation for tel input (i.e. type="tel") is presently not endorsed by any browser because layout for phone numbers differ so far across countries, but still it is helpful. For entering phone numbers mobile browsers exhibit a numeric keyboard for tel input field.
Browser Support

The following browsres and corresponding versions in the table that completely supports the tel type.

Input Type Chrome Edge Firefox Safari Opera
Type="tel" Not Supported Not Supported Not Supported yes Not Supported