min
min attribute
The min attribute establishes the lowest allowable value for input elements like number, range, or date, ensuring that values do not fall below this limit.
Purpose: The min attribute specifies the minimum value for input elements such as <input>, <meter>, or <progress>, effectively setting a lower boundary for user inputs.
Syntax
<input min="number | datetime">
Syntax Examples
| Input Type | Syntax | Example Code |
|---|---|---|
| Date | yyyy-mm-dd | <input type="date" min="2019-12-25" step="1"> |
| Month | yyyy-mm | <input type="month" min="2019-12" step="12"> |
| Week | yyyy-W## | <input type="week" min="2019-W23" step=""> |
| Time | hh:mm | <input type="time" min="09:00" step="900"> |
| Datetime-local | yyyy-mm-ddThh:mm | <input type="datetime-local" min="2019-12-25T19:30"> |
Example
<label for="age">Age (min 18):</label>
<input type="number" id="age" name="age" min="18">
Definition and Usage
The min attribute sets the minimum value for an <input> element.
min and max attributes together to define a range of valid values.Values
- number
- The lowest allowable number that can be entered in an input field.
- datetime
- The earliest acceptable datetime that can be entered in an input field.
Accessibility
- Instructions: Explicitly define the minimum requirements in labels or descriptions. For additional help and clarification, use
aria-labelledbyoraria-describedby.
Conclusion
The min attribute defines the lowest value a user can enter in an input field, such as numbers or dates. It helps ensure data falls within a specified range when combined with the max attribute. This improves form validation and guides users to input valid values.
media
The HTML media attribute defines the target media type or conditions for linked resources, allowing responsive design based on screen size or device type.
minlength
The HTML minlength attribute sets the minimum number of characters required in an input field, ensuring users provide a certain length of input before submitting the form.