In this tutorial we will show you the solution of HTML input pattern numbers only, in HTML we all know that there is an input tag that is used under form tag.
Whereas form tag is used to receive data from the user as feedback forms and surveys etc. Hence, there is also need of numbers sometimes that we want to get as input from user.
Like in form of age, mobile number and also in many other ways. Or also many times user enters or type wrong number by mistake and we did not want that feedback which is wrong. So, we use number patterns.
Step By Step Guide On HTML Input Pattern Numbers Only :-
As, there are many ways with the help of which you are able to apply conditions on input tag. We can use jQuery and JavaScript libraries also.
Hence, these are seems to be very complex, so to avoid this we today are here and want to show you that how you are able to apply this condition with the help of html only.
And this can be done with the help of html input pattern numbers. Which we describe in below points.
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">
<label for="">
please enter your age in numbers which must be between 0-99
</label>
<input type="number" name="nmbrone" id="nmbrone" pattern="[0-9]{2}" placeholder="18">
<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 three examples.
- The first is of mobile number, next is of telephone number and last is of age.
- In all of them, we use patterns, except this most of same. The patterns are used where you want to apply condition on numbers.
- The first one used in patterns is square brackets, which are used to describe range, which is between 0-9, and other in square bracket, we use these for range.
- Like how many digits a user have to enter and in which pattern. We hope you understand this article properly.
- At last, the <body> and <html> tags are closed with </body> and </html> respectively.
Conclusion :-
In conclusion, here we want to say that with the help of this article you are able to apply patterns only any input type like which may be a number or may be telephone.
Also, we show you how to use patterns in telephones with proper understandability. I hope this tutorial on HTML input pattern numbers only helps you.
About Riya
