Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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.
The most effective way to restrict input to numbers is using <input type="number">. This creates a numeric input field that automatically validates user input and provides built-in controls like spinner buttons. Additionally, we can use attributes like min, max, and step to further control the allowed numeric values.
Syntax
Following is the basic syntax to create a numeric input field −
<input type="number">
Following is the syntax with additional attributes for range control −
<input type="number" min="value" max="value" step="value">
Parameters
The type="number" input supports several useful attributes −
min − Specifies the minimum allowed value
max − Specifies the maximum allowed value
step − Defines the increment/decrement step size
value − Sets the default value
placeholder − Shows hint text when the field is empty
Basic Number Input
Following example demonstrates a simple numeric input form −
<!DOCTYPE html>
<html>
<head>
<title>Basic Number Input</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
input[type=number] {
width: 200px;
padding: 8px;
margin: 5px 0;
border: 2px solid #4CAF50;
border-radius: 4px;
}
.form-group { margin: 15px 0; }
</style>
</head>
<body>
<h2>Contact Information</h2>
<form>
<div class="form-group">
<label>Mobile Number:</label>
<input type="number" name="mobile" placeholder="Enter mobile number">
</div>
<div class="form-group">
<label>PIN Code:</label>
<input type="number" name="pincode" placeholder="Enter PIN code">
</div>
<input type="submit" value="Submit">
</form>
</body>
</html>
The above form only accepts numeric values. If you try to enter letters or special characters, the browser will show a validation message and prevent form submission.
Number Input with Range Validation
Following example shows how to limit numeric input within a specific range −
<!DOCTYPE html>
<html>
<head>
<title>Number Input with Range</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
input[type=number] {
width: 100px;
padding: 5px;
margin: 5px;
border: 1px solid #ccc;
border-radius: 3px;
}
.invalid { border-color: #ff0000; }
</style>
</head>
<body>
<h3>Age Verification Form</h3>
<form>
<label>Enter your age:</label>
<input type="number" name="age" min="18" max="100" placeholder="18-100">
<br><br>
<input type="submit" value="Verify Age">
</form>
<p><em>Note: Only ages between 18 and 100 are accepted.</em></p>
</body>
</html>
If a user enters a value outside the specified range (less than 18 or greater than 100), the browser will display an appropriate validation message when they try to submit.
Quantity Selection with Step Control
Following example demonstrates using numeric inputs for quantity selection with step control −
<!DOCTYPE html>
<html>
<head>
<title>Food Quantity Selection</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
.item {
display: flex;
align-items: center;
margin: 10px 0;
padding: 8px;
background: #f9f9f9;
border-radius: 5px;
}
.item label { width: 120px; }
input[type=number] {
width: 60px;
padding: 4px;
margin-left: 10px;
border: 1px solid #ddd;
border-radius: 3px;
text-align: center;
}
</style>
</head>
<body>
<h2>Food Order Form</h2>
<p>Select quantity (Maximum 5 items per category):</p>
<form>
<div class="item">
<label>Pizza:</label>
<input type="number" name="pizza" min="0" max="5" value="0" step="1">
</div>
<div class="item">
<label>Burger:</label>
<input type="number" name="burger" min="0" max="5" value="0" step="1">
</div>
<div class="item">
<label>Garlic Bread:</label>
<input type="number" name="garlic_bread" min="0" max="5" value="0" step="1">
</div>
<div class="item">
<label>Pepsi:</label>
<input type="number" name="pepsi" min="0" max="5" value="0" step="1">
</div>
<br>
<input type="submit" value="Place Order">
</form>
</body>
</html>
Each input field is limited to values between 0 and 5. The step="1" attribute ensures that only whole numbers can be entered using the spinner controls.
Alternative Method − Using Pattern Attribute
For additional control, you can combine type="text" with the pattern attribute to restrict input to numbers only −
<!DOCTYPE html>
<html>
<head>
<title>Pattern-based Number Input</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
input { padding: 8px; margin: 5px; border: 1px solid #ccc; }
.highlight { background-color: #ffffcc; }
</style>
</head>
<body>
<h3>Phone Number Entry</h3>
<form>
<label>Phone (10 digits only):</label>
<input type="text" pattern="[0-9]{10}" title="Please enter exactly 10 digits" placeholder="1234567890">
<br><br>
<input type="submit" value="Submit">
</form>
<p><small>This method uses pattern matching to ensure exactly 10 numeric digits.</small></p>
</body>
</html>
The pattern="[0-9]{10}" attribute ensures that only exactly 10 digits are accepted, making it perfect for phone numbers or similar fixed-length numeric inputs.
Browser Validation Behavior
When using type="number", browsers provide automatic validation −
Invalid characters − Entering non-numeric characters triggers "Please enter a number" message
Range violations − Values outside min/max range show "Value must be between X and Y" message
Step violations − Values not matching the step increment show appropriate error messages
Empty required fields − Adding
requiredattribute prevents empty submissions
Conclusion
The <input type="number"> element is the standard and most effective way to limit HTML input to numeric values only. It provides built-in validation, spinner controls, and works seamlessly with attributes like min, max, and step for comprehensive numeric input control. For specialized formats, the pattern attribute offers additional flexibility.
38K+ Views
