Article Categories

Selected Reading

How to use telephone input type in HTML?

HTML Web Development Front End Technology

The telephone input type in HTML uses the <input type="tel"> element to create form fields specifically designed for telephone numbers. This input type provides better user experience on mobile devices by displaying a numeric keypad and enables semantic validation.

Syntax

Following is the syntax for the telephone input type −

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

The tel input type accepts any text but is optimized for telephone number entry, especially on mobile browsers.

Basic Example

Following example demonstrates a simple telephone input field −

<!DOCTYPE html>
<html>
<head>
   <title>HTML Telephone Input</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <h2>Contact Form</h2>
   <form action="#" method="get">
      <label for="name">Student Name:</label><br>
      <input type="text" id="name" name="sname" style="margin: 5px 0; padding: 8px; width: 250px;"><br><br>
      
      <label for="phone">Student Telephone:</label><br>
      <input type="tel" id="phone" name="telephone" style="margin: 5px 0; padding: 8px; width: 250px;"><br><br>
      
      <input type="submit" value="Submit" style="padding: 10px 20px; background-color: #007cba; color: white; border: none; cursor: pointer;">
   </form>
</body>
</html>

On mobile devices, tapping the telephone input field displays a numeric keypad optimized for phone number entry.

Enhanced Telephone Input with Attributes

The telephone input type supports various attributes for better validation and user experience −

Example with Pattern and Placeholder

<!DOCTYPE html>
<html>
<head>
   <title>Enhanced Telephone Input</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <h2>Registration Form</h2>
   <form action="#" method="post">
      <label for="userPhone">Phone Number:</label><br>
      <input 
         type="tel" 
         id="userPhone" 
         name="phone" 
         placeholder="(123) 456-7890"
         pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
         title="Please enter phone number in format: 123-456-7890"
         required
         style="margin: 5px 0; padding: 10px; width: 250px; border: 2px solid #ddd; border-radius: 4px;"
      ><br><br>
      
      <label for="altPhone">Alternative Phone (Optional):</label><br>
      <input 
         type="tel" 
         id="altPhone" 
         name="altPhone" 
         placeholder="+1-123-456-7890"
         style="margin: 5px 0; padding: 10px; width: 250px; border: 2px solid #ddd; border-radius: 4px;"
      ><br><br>
      
      <input type="submit" value="Register" style="padding: 12px 24px; background-color: #28a745; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px;">
   </form>
</body>
</html>

This example includes a pattern attribute for format validation, placeholder text for guidance, and required attribute for mandatory validation.

Telephone Input with JavaScript Validation

Example

<!DOCTYPE html>
<html>
<head>
   <title>Telephone Input with Validation</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
   <h2>Phone Number Validation</h2>
   <form onsubmit="return validatePhone()" action="#" method="post">
      <label for="phoneNumber">Enter Phone Number:</label><br>
      <input 
         type="tel" 
         id="phoneNumber" 
         name="phone" 
         placeholder="123-456-7890 or (123) 456-7890"
         style="margin: 5px 0; padding: 10px; width: 300px; border: 2px solid #ddd; border-radius: 4px;"
      ><br>
      <span id="phoneError" style="color: red; font-size: 14px;"></span><br><br>
      
      <input type="submit" value="Validate & Submit" style="padding: 12px 24px; background-color: #007cba; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 16px;">
   </form>
   
   <script>
      function validatePhone() {
         var phone = document.getElementById("phoneNumber").value;
         var phoneRegex = /^[\+]?[1-9]?[\d]{3}[-.\s]?\d{3}[-.\s]?\d{4}$|^\(\d{3}\)\s?\d{3}[-.\s]?\d{4}$/;
         var errorElement = document.getElementById("phoneError");
         
         if (phone === "") {
            errorElement.textContent = "Phone number is required.";
            return false;
         } else if (!phoneRegex.test(phone)) {
            errorElement.textContent = "Please enter a valid phone number format.";
            return false;
         } else {
            errorElement.textContent = "";
            alert("Valid phone number: " + phone);
            return true;
         }
      }
   </script>
</body>
</html>

This example validates phone numbers in multiple formats including (123) 456-7890, 123-456-7890, and 123.456.7890.

Key Features and Benefits

The telephone input type offers several advantages −

Mobile Optimization − Automatically displays numeric keypad on mobile devices.
Semantic Meaning − Clearly indicates the field is for telephone numbers.
Accessibility − Screen readers can identify the field as a phone number input.
No Built-in Validation − Accepts any text, allowing flexibility for international formats.
Pattern Support − Works with the pattern attribute for custom validation.

Browser Compatibility

The input type="tel" is supported by all modern browsers. While older browsers may treat it as a regular text input, the functionality degrades gracefully without breaking the form. The mobile keyboard optimization is supported by −

iOS Safari − Full support with numeric keypad
Android Chrome − Full support with numeric keypad
Desktop browsers − Treated as regular text input

Common Attributes

Following are commonly used attributes with the telephone input type −

Attribute	Description	Example
`placeholder`	Shows example format to user	`placeholder="(123) 456-7890"`
`pattern`	Regular expression for validation	`pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"`
`required`	Makes the field mandatory	`required`
`maxlength`	Limits maximum characters	`maxlength="15"`
`title`	Tooltip text for validation help	`title="Enter 10-digit number"`

Conclusion

The telephone input type (input type="tel") provides an optimized user experience for phone number entry, especially on mobile devices where it displays a numeric keypad. While it accepts any text format, combining it with pattern validation and placeholder text creates user-friendly forms for collecting telephone numbers effectively.

Monica Mona

Updated on: 2026-03-16T21:38:53+05:30

629 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next