type="tel" Attribute
This attribute is used in an <input> element to allow users to enter telephone numbers. Browsers may display a specialized keyboard optimized for entering phone numbers on mobile devices, but there is no automatic validation of the format. The tel input type does not guarantee that users will input a valid phone number.
pattern Attribute
The pattern attribute is used to define a specific regular expression (regex) that the user's input must match. It's often used to enforce a certain format for the phone number. When the user submits the form, the browser checks if the entered value matches the regular expression pattern. If not, the form will not submit, and a validation message is displayed.
telephone-number.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Password Input Example</title> </head> <body> <form action="https://httpbin.org/post" method="POST"> <label for="phone">Phone Number:</label><br> <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="123-456-7890" required><br> <small>Format: 123-456-7890</small><br><br> <button type="submit">Submit</button> </form> </body> </html>
Above snippet generate below screen.
Add some invalid data like aaaaa, and click on Submit button, you can see a validation error on the screen.
1. type="tel": Specifies that the input field is for telephone numbers.
2. pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}": This pattern ensures the user enters a phone number in the format "123-456-7890".
· [0-9]{3}: Three digits.
· -: A hyphen separating the parts.
· [0-9]{4}: Four digits at the end.
Previous Next Home
No comments:
Post a Comment