Allow Only Numbers In Textbox HTML5
Last Updated : Mar 11, 2024
IN - HTML HTML5 | Written & Updated By - Dikshita
In this tutorial we will show you the solution of allow only numbers in textbox HTML5, in html, there is also a way with the help of which you are able to allow only numbers in html.
This is very beneficial like questions, in which you want to user to enter age, date of birth, or like marks, percentage etc.
Hence for these cases only numbers are used in textbox and in background a code is created by user with the help of which user is able to write only numbers, so today our topics is about how to allow only numbers in textbox.
We hope that you will understand the article properly.
Step By Step Guide On Allow Only Numbers In Textbox HTML5 :-
As, there are many ways with the help of which you are able to allow only numbers in textbox. But we help you to learn this code in easiest way and this can only be done with help of us.
So, here below we provide you html codes in easiest way to show you how this can be done and later we will explain you how this code work.
<!DOCTYPE html>
<html>
<head>
<title> Title of the document<title>
</head>
<body style="text-align: center;">
<h2>
Registration form
</h2>
<form action="#" method="get">
<label for="">
Enter your full name here:
</label>
<input type="text">
<br>
<br>
<label for="">
Please enter your age here:
</label>
<input type="number" name="" id="">
<br><br>
<p>
This information is only for educational purposes.
</p>
<br><br>
<input type="button" value="Submit">
<input type="button" value="Reset">
</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 the body tag, here we create heading first, which is used for give reference like what the form is for and why you have to fill it.
- After this we create a form in which first we use labels as an introduction given before input tags that what you have to fill in these tags.
- Under this we create two input tags, first one is with value text and other is with value numbers and when you open this codes on browser, you see that in input tag having value text.
- You are able to write values like alphabets, numbers and special characters also. But in below input tag, which is made with the help of input type number, only numbers are typed there.
- 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 number value in input we are able to make a textbox in which only numbers are placed there.
In next session, we will also explain you that how you are able to put a limit like minimum and maximum limit in html also. I hope this tutorial on allow only numbers in textbox HTML5 helps you.
About Dikshita
