10 Digit Phone Number Validation In HTML
Last Updated : Mar 11, 2024
IN - HTML | Written & Updated By - Amruta
In this tutorial we will show you the solution of 10 digit phone number validation in HTML, in HTML sometimes we want to make a form in which we want from user to enter his/her own mobile number.
So, we know the mobile number is a ten digit number with a country code used as prefix. Today, we are not talking about country codes.
We only talk about mobile number validation, this means that sometimes we enter or type a number which is less than ten digits or sometimes we enter a number which is more than 10 digits and we have to validate them that they are right or not.
So, unfortunately this happens, and today we talk about how to check the number in this article of 10 digits.
Step By Step Guide On 10 Digit Phone Number Validation In HTML :-
As, there are many ways with the help of which you are able to make a 10 digit mobile number validation in html.
Hence, today we in below make a program in which we have to enter only ten digits, but only with the help of html only. After this we help you to understand how it work.
I think, I already give this topic as question also. So, we will provide answer in this topic.
Here, below we give you a code in html, we hope that you are able to understand what we do here.
<!DOCTYPE html>
<html>
<head>
<title> Title of the document<title>
</head>
<body>
<form action="demo10/secondbusiness.html" method="get">
<label for="">
Please enter your enter your mobile number
</label>
<input type="tel" name="phone" id="phone" placeholder="0123456789" pattern="[0-9]{10}">
<br><br>
<label for="">
please enter your telephone number
</label>
<input type="tel" name="nmbr" id="nmbr" pattern="[0-9]{4}-[0-9]{6}" placeholder="0161-123456">
<input type="submit">
</form>
</body>
</html>
- First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here. In body, here we show you two example the second one is of telephone number which we already discuss.
- The first one is new in which we have create an input tag with type telephone. The placeholder is given here for reference.
- And the pattern is here that the range of each digit is in between 0-9 and the range is applicable to 10 digits. And we only write 10 digits in this.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
In conclusion, here we want to say that we are now able to enter 10 digits mobile number, without any special character also.
This method is mainly used by all the programmer, in their feedback form and login or sign up forms also. I hope this tutorial on 10 digit phone number validation in HTML helps you.
About Amruta
