You can give the input as a number in HTML using <input type=”number”>. The <input type=”number”> is used to prevent the non-numeric inputs and you can set the boundaries for numeric input using max, min, and step attributes. We will discuss these features in this blog in detail.
Table of Contents:
The key features of HTML are numeric input with validation, accessibility feature with aria attribute, custom error message for invalid input, and form validation with max, min, and step attributes.
You can use the type=“number” to allow only numeric input. The validation constraint can be used.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Numeric Input with Validation</title>
</head>
<body>
<h2>Enter a number between 0 and 1000</h2>
<form id="numericForm">
<label for="numericInput">Number:</label>
<input
type="number"
id="numericInput"
name="numericInput"
value=""
min="0"
max="1000"
step="1"
required
>
<button type="submit">Submit</button>
</form>
</body>
</html>
Output:
Explanation: The HTML code is created with a range of input values with built-in validation to ensure the input is valid.
2. Accessibility with aria attributes
The aria-labelledby, connects the label to the input field. So that the screen reader understands the label.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accessible Numeric Input</title>
</head>
<body>
<h2>Accessible Numeric Input</h2>
<form>
<label for="numericInput" id="numericInputLabel">Enter a number:</label>
<input
type="number"
id="numericInput"
name="numericInput"
min="0"
max="1000"
aria-labelledby="numericInputLabel"
aria-describedby="numericInputDescription"
required
>
<div id="numericInputDescription">
<p>Please enter a number between 0 and 1000. Only whole numbers are allowed.</p>
</div>
</form>
</body>
</html>
Output:
Explanation: The accessible form is created, to enter the range of numbers with the labels and description.
The user gets the error message for the invalid input. The checkvalidity() checks for the valid input.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Custom Error Message for Invalid Input</title>
<style>
.error {
color: red;
font-size: 0.9em;
}
</style>
</head>
<body>
<h2>Enter a number</h2>
<form id="formWithErrorHandling">
<label for="numericInput">Enter a number:</label>
<input
type="number"
id="numericInput"
name="numericInput"
min="0"
max="1000"
required
>
<div id="error-message" class="error" style="display: none;">
Please enter a valid number between 0 and 1000.
</div>
<button type="submit">Submit</button>
</form>
<script>
const form = document.getElementById('formWithErrorHandling');
const numericInput = document.getElementById('numericInput');
const errorMessage = document.getElementById('error-message');
form.addEventListener('submit', function(event) {
// Check validity of the input
if (!numericInput.checkValidity()) {
event.preventDefault(); // Prevent form submission
errorMessage.style.display = 'block'; // Show custom error message
} else {
errorMessage.style.display = 'none'; // Hide error message if valid
}
});
</script>
</body>
</html>
Output:
Explanation: The form is created for entering the number and it shows an error message when the user input is invalid.
In this example, the required field needs to be filled, min and max make the input value between these numbers and step make sure the input is a whole number.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Validation</title>
</head>
<body>
<h2>Form Validation</h2>
<form id="validationForm">
<label for="numericInput">Enter a number (required, between 0 and 1000):</label>
<input
type="number"
id="numericInput"
name="numericInput"
min="0"
max="1000"
step="1"
required
>
<button type="submit">Submit</button>
</form>
</body>
</html>
Output:
Explanation: The form is created with the specified input range with attributes like required, max, min, step, and built-in validation to ensure the user input is valid.
Conclusion
Using <input type=”number”> in HTML helps ensure users enter numbers into your forms. It includes built-in validation to block non-numeric input and allows you to set limits using max, min, and step attributes. Accessibility features like aria-labelledby and custom error messages improve the user experience for everyone.