Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to limit an HTML input box so that it only accepts numeric input?
In this article, we will learn how to limit an HTML input box so that it only accepts numeric inputs.
We use the <input type="number"> to limit an HTML input box so that it only accepts numeric inputs. By using this, we will get a numeric input field.
Syntax
Following is the syntax to limit an HTML input box so that it only accepts numeric input.
<input type="number">
Example
Following is the example program to limit an HTML input box so that it only accepts numeric input -
<!DOCTYPE html> <html> <center> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> input[type=number] { width: 10%; padding: 12px 20px; margin: 8px 0; box-sizing: border-box; border: 2px solid mediumseagreen; border-radius: 4px; } </style> </head> <body> <h1>Tutorialspoint</h1> <form action = "" method = "get"> Enter your Mobile number - <input type="number"> <br><br> Enter your area Pincode - <input type="number"> <br><br> <input type="submit" value="Submit"> </form> </body> </center> </html>
If we try to enter any value apart from numeric it will not allow. So it strictly allows only numeric values.
Example
Following is another example program to limit an HTML input box so that it only accepts numeric input -
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <form action = "" method = "get"> Phone Number: <input type="number" name="num" min="1" max="20"><br> <input type="submit" value="Submit"> </form> </body> </html>
After limiting the input box to number, if a user enters text and press submit button, then the following can be seen “Please enter a number.”
We can also limit the value of the number input field.
After limiting the input box to number, if a user enters greater than the limit and press submit button, then the following can be seen "Value must be less than or equals to limit value specified(20)".
Example
Following is another example program to limit an HTML input box so that it only accepts numeric input -
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <form action = "" method = "get"> <h3>Select the quantity, and we cannot deliver more than 5.</h3><br> Pizza<input type="number" name="num" min="0" max="5"><br> Burger<input type="number" name="num" min="0" max="5"><br> Garlic Bread<input type="number" name="num" min="0" max="5"><br> Pepsi<input type="number" name="num" min="0" max="5"><br> </form> </body> </html>
If you compile and run the above code, it will display 4 boxes and you can set the limit from minimum 0 to maximum 5.
33K+ Views
