Problem Statement
Which attributes restrict the range of numeric inputs?
Explanation
The min and max attributes restrict the range of numeric inputs. The min attribute sets the minimum acceptable value, and max sets the maximum. For example, min equals 1 max equals 100 allows values between 1 and 100. If users enter a value outside this range, the browser shows an error on submission. These attributes work with number, date, time, range, and other numeric input types. For number inputs, min and max specify numeric boundaries. For date inputs, they specify date ranges. For range sliders, they define the slider limits. You can also use the step attribute with min and max to control allowed increments. Min and max validation improves data quality by ensuring values fall within acceptable ranges.
Code Solution
SolutionRead Only
<!-- Age with min and max -->
<form>
<label for="age">Age (18-100):</label>
<input type="number"
id="age"
name="age"
min="18"
max="100"
required>
</form>
<!-- Date range -->
<form>
<label for="appointment">Appointment Date:</label>
<input type="date"
id="appointment"
name="date"
min="2024-01-01"
max="2024-12-31"
required>
</form>
<!-- Quantity selector -->
<form>
<label for="qty">Quantity (1-10):</label>
<input type="number"
id="qty"
name="quantity"
min="1"
max="10"
value="1"
required>
</form>
<!-- Price range -->
<form>
<label for="price">Price ($10-$1000):</label>
<input type="number"
id="price"
name="price"
min="10"
max="1000"
step="0.01"
required>
</form>