Problem Statement
Which attributes can be used with type="number" to restrict input?
Explanation
The min and max attributes can be used with number inputs to restrict the allowed values. The min attribute sets the minimum acceptable value, and max sets the maximum. For example, min equals 1 max equals 10 allows only numbers between 1 and 10. The browser will show an error if users try to submit values outside this range. You can also use the step attribute to specify the increment. For example, step equals 0.5 allows values like 1.5, 2.0, 2.5. The step attribute defaults to 1, allowing only integers unless specified otherwise. Number inputs provide up and down arrows, called spinners, to increment or decrement values. On mobile devices, number inputs trigger a numeric keyboard. These features make number inputs better than text inputs for numeric data, improving both usability and data quality.
Code Solution
SolutionRead Only
<!-- Number input with min and max -->
<form>
<label for="age">Age:</label>
<input type="number"
id="age"
name="age"
min="18"
max="100"
required>
</form>
<!-- Quantity selector -->
<form>
<label for="quantity">Quantity:</label>
<input type="number"
id="quantity"
name="qty"
min="1"
max="99"
value="1"
step="1">
</form>
<!-- Price input with decimals -->
<form>
<label for="price">Price:</label>
<input type="number"
id="price"
name="price"
min="0"
step="0.01"
placeholder="0.00">
</form>
<!-- Rating input -->
<form>
<label for="rating">Rating (1-5):</label>
<input type="number"
id="rating"
name="rating"
min="1"
max="5"
step="1"
value="3">
</form>