To set minimum and maximum values for an input element in HTML5, we utilize the min and max attributes. For numerical inputs like type numbers, assign the desired limits directly. Alternatively, use JavaScript validation, pattern attributes, or event listeners for more complex validation scenarios, ensuring user input remains within the specified range.
Different Approaches to Set Min and Max Values for Input Elements
1. Using the min and max Attributes:
We can use the min and max attributes within an HTML <input> tag involves specifying the minimum and maximum acceptable values for user input, limiting input to a defined range.
Syntax:
<input type="number" min="min_value" max="max_value">
Example: In this example, we have used two inputs with different input types, one is a number type and the other is the date type. The minimum and maximum range of the number is from 1 to 100 and the dates are from 01-01-2020 to 01-01-2021.
<html>
<head>
<style type="text/css">
label {
font: 18px;
}
input {
margin: 7px;
padding: 2px
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<h3>Set a minimum and maximum value</h3>
<form>
<label for="Number">
Enter Number (between 1 and 100):
</label>
<input type="number"
id="Number"
name="Number"
min="1"
max="100">
<br>
<label for="datemin">Enter a date after
01-01-2020 and before 01-01-2021:
</label>
<input type="date" i
d="datemin"
name="datemin"
min="2020-01-01"
max="2021-01-01">
<br>
<input type="submit">
</form>
</body>
</html>
|
Output:
Explanation:
- In the above example The min=”1″ and max=”100″ attributes ensure the entered value in the number input field (<input type=”number”>) falls within the range of 1 to 100.
- The min=”2020-01-01” and max=”2021-01-01” attributes restrict selectable dates in the date input field (<input type=”date”>) between January 1, 2020, and January 1, 2021.
- These attributes enforce data validation, preventing users from entering or selecting values outside the specified range, ensuring input integrity.
2. Using the pattern Attribute:
The pattern attribute in HTML input tags specifies a regular expression pattern for validating user input. It restricts input to match the defined pattern, ensuring data conforms to specific formatting or content requirements.
Syntax
<input pattern = "regular_exp">
Example: Here is the basic example of using the pattern Attribute to set minimum and maximum values of input element.
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pattern Attribute Example</title>
<style>
label {
font: 18px;
}
input {
margin: 7px;
padding: 2px;
}
</style>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<h3>Set a minimum and maximum value</h3>
<form>
<label for="Number">
Enter Number (between 1 and 100):
</label><br>
<input type="text"
id="Number"
name="Number"
pattern="[1-9][0-9]?"
title="Enter a number between 1 and 100">
<br>
<input type="submit">
</form>
</body>
</html>
|
Output:
Explanation:
- In this example The input field is specified as a text type (<input type=”text”>) to accommodate the pattern attribute for custom validation.
- The pattern=”[1-9][0-9]?” attribute defines a regular expression pattern allowing numbers between 1 and 100.
- The title=”Enter a number between 1 and 100″ attribute provides a tooltip message when the pattern is not matched.