Mobile Number Validation In HTML
Last Updated : Mar 11, 2024
IN - HTML | Written & Updated By - Ashish
In this tutorial we will show you the solution of mobile 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.
So, unfortunately this happens, and today we talk about how to check the number in this article.
Step By Step Guide On Mobile Number Validation In HTML :-
As, there are many ways with the help of which you are able to check whether the entered number is valid or not. But we have to do this with the help of html only.
Hence, today we show you how you are able to do this with the help of html.
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="0123-456-789" pattern="[0-9]{4}-[0-9]{3}-[0-9]{3}">
<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, we show you two examples, you can also create one only according to your choice.
- Here, we create two input tags with one button. The button here is used to submit, whereas the two input tags require two telephone numbers with different patters as described in placeholder for user’s reference.
- After this we come inside code, here we use patterns, in which the value used inside the square brackets are form range and used inside the curly braces are for number of digits in which range is being applied. You can customize all values according to your choice.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
In conclusion, here we are now able to make a mobile number validation program in html.
Now, here is one assignment for you to make a pattern for mobile number in which you can enter only 10 digits with any character and range between 0-9.
I hope this tutorial on mobile number validation in HTML helps you.
About Ashish
