Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
457 views
in Technique[技术] by (71.8m points)

forms - Phone pattern for <input type="tel"> in HTML

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>
question from:https://stackoverflow.com/questions/65908424/phone-pattern-for-input-type-tel-in-html

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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>

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...