In this tutorial we will show you the solution of phone number pattern in HTML, in this we are going to learn you about phone number patterns in html. Phone number patterns like in some countries let us assume like India, Sri Lanka, and etc.
Majorly in these countries phone number start from 6/7/8 or 9. Hence, if someone in forms write his/her wrong mobile number like 1234567890 or 5214889007, then there should be a message have to print like this phone number is not valid.
Or if someone adds his/her country code as prefix of mobile number then in database the length of mobile number gets different.
So, to avoid these chances of misunderstandings, there is an attribute named as pattern in html. Let us understand what are patterns and how to use them.
Step By Step Guide On Phone Number Pattern In HTML :-
As, we already said that patterns are used for the specific pattern which developer wants from user.
In case of mobile numbers, we write a pattern in coding like there should be only 7/8/9 as first digit and rest may be any or the pattern of mobile number must be 9887-654-321 or +91-9963-258-741.
Hence, when we want specific format of phone number in html. Then patterns are used.
For user’s understanding like what type of pattern we want, we have to add placeholder there. Let us understand this paragraph with the help of codes.
<!DOCTYPE html>
<html>
<head>
<title> Title of the document</title>
</head>
<body>
<form action="second.html" method="post">
<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">
<br><br>
<label for="">
please enter your mobile number
</label>
<input type="tel" name="nmbrone" id="nmbrone" pattern="[0]{1}[0-9]{10}" placeholder="09786231450">
<br><br>
<label for="">
enter your mobile number here
</label>
<input type="tel" name="nmbrone" id="nmbrone" pattern="+91[7-9]{1}[0-9]{9}" value="+91" placeholder="+919887654123">
<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 create a form tag with post method. As we know form tag is paired tag so all the content is written inside these tags.
- Inside form we create label tags to display text and then we create some input tags to insert data from user. The main thing is here to use patterns.
- In case of patterns, you can apply validation on every digit of phone number. Like in square brackets we have to apply validation like from which to which digits are allowed and in curly bracket we have to give number of digit must be entered of previous square bracket.
- If you want to add any special character you can use accordingly. Here, you can see in codes that we here create four different methods to apply patterns on mobile number.
- And for user understanding we use placeholders here. We hope that you understand codes.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
In conclusion, here we can say that with the help of this article we are able to use phone number pattern in html. I hope this tutorial on phone number pattern in HTML helps you.
About Anjali
