HTML5 Input Type Tel
The tel input type is intended for telephone number inputs. While it does not validate the format of the telephone number entered, it prompts mobile browsers to display a telephone keypad, making it easier for users to enter phone numbers.
Features:
- Optimizes mobile keyboard for telephone number input.
- Does not enforce a specific format, offering global compatibility.
- Can be used in conjunction with pattern attributes for custom validation.
Example:
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <title>HTML5 Input Type Tel</title> </head> <body> <form> <label for="phone">Phone Number:</label> <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="123-456-7890"> <input type="submit"> </form> </body> </html> |
Output
Difference Between Input Type number and tel in HTML
In HTML5, form inputs have been significantly enhanced to facilitate more specific data types and improve user experience across various devices. Among these enhancements, the number and tel input types are notable for their specific purposes. Understanding the distinction between these two types is crucial for web developers aiming to create intuitive and efficient web forms. This article provides a detailed overview of both input types, complete with descriptions, code examples, and a comparative analysis.