Phone pattern for <input type=“tel”> in HTML
Question
So I tried to run the following code to practice using HTML forms and the telephone no. part is giving a problem. When I type any telephone number which according to me should satisfy the requirements, it says "Please match the requested format". I believe the requirements ask for a number with ten digits each of which are from 1 to 9. Did I write my requirements wrong? Help
<:DOCTYPE html><html> <head> <title> Forms in HTML5:) </title> </head> <body> <form align="center">Name:<input type="text" autocomplete><br><br> Email:<input type="email" name="email"><br><br> Date of Inception:<input type="time" name="usr_time"><br><br> Number of years completed(between 1 and 100):<input type="number" min="1" max="100"><br><br> Office phone number: <input type="tel" id="phone" name="phone" pattern="[0-9]{10}'' required><br><br> Add your homepage: <input type="url" name="homepage"><br><br> <input type="image" src="E./HTML1/SUBMIT-BUTTON.png" height="60" width="180" alt="click here to submit"> </form> </body> </html>
1 answers
solution1
0 ACCPTED 2021-01-26 21:18:09
you wrote '' instead of " in pattern="[0-9]{10}"
this code works:
<!DOCTYPE html><html>
<head>
<title>
Forms in HTML5 :)
</title>
</head>
<body>
<form align="center">Name:<input type="text" autocomplete><br><br>
Email:<input type="email" name="email"><br><br>
Date of Inception:<input type="time" name="usr_time"><br><br>
Number of years completed(between 1 and 100):<input type="number" min="1"
max="100"><br><br>
Office phone number: <input type="tel" id="phone" name="phone" pattern="[0-9].
{10}" required><br><br>
Add your homepage:
<input type="url" name="homepage"><br><br>
<input type="image" src="E:/HTML1/SUBMIT-BUTTON.png" height="60" width="180"
alt="click here to submit">
</form>
</body>
</html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Html input type="tel" vs inputmode="tel"
Auto-format html input type tel
Invalid input type tel
html input pattern for phone number
HTML phone number pattern in <input>
Html input type for phone number
When using input type=“tel” on a mobile phone, how can I change what the enter key does?
How to use pattern for phone number in an html input?
(html) Tel:phone-number not working
I have to change the input type to tel from text of the html form on runtime using jquery
Related Tags