Learn how to restrict user input values using the min and max attributes on HTML form controls.
What it is
The min and max attributes define the lower and upper bounds for valid input values. They are primarily used with numeric inputs (type="number", type="range") and temporal inputs (type="date", type="time"). When a value falls outside these bounds, the browser marks the field as invalid during form submission or validation checks. This provides immediate visual feedback without requiring JavaScript.
Why it matters
- Data Integrity: Prevents nonsensical data entry, such as negative ages or future dates in past-event forms.
- User Experience: Provides clear constraints before the user submits, reducing frustration from server-side errors.
- Accessibility: Screen readers announce the range limits, helping users understand expected values.
- Simplicity: Requires no additional scripting logic for basic range enforcement.
Syntax or steps
Add the min attribute to set the lowest acceptable value and the max attribute to set the highest. The format of the value depends on the input type:
number: Numeric strings (e.g.,"10").date: ISO 8601 date string (YYYY-MM-DD).time: HH:MM or HH:MM:SS format.range: Numeric strings defining slider limits.
Example
<form>
<label for="age">Age (1-120):</label>
<input type="number" id="age" name="age" min="1" max="120">
<br><br>
<label for="event-date">Event Date (2023-01-01 to 2024-12-31):</label>
<input type="date" id="event-date" name="event_date"
min="2023-01-01" max="2024-12-31">
<br><br>
<label for="volume">Volume:</label>
<input type="range" id="volume" name="volume" min="0" max="100" step="5">
</form>In this example, the age input rejects values below 1 or above 120. The date picker disables days outside the specified year range. The volume slider only allows movement between 0 and 100 in increments of 5.
Common mistakes
- Incorrect Date Format: Using local formats like "MM/DD/YYYY" instead of ISO "YYYY-MM-DD". Always use ISO format for
min/maxon date inputs. - Missing Step Attribute: On
rangeornumberinputs, forgettingstepcan lead to unexpected floating-point values if decimals are allowed but not intended. - Assuming Server-Side Security: These attributes are client-side hints. Users can bypass them via developer tools. Always validate data on the server.
- Conflicting Values: Setting
minhigher thanmaxcreates an impossible state where no value is valid.
When to use it
| Feature | Use Case |
|---|---|
min/max |
Simple, static boundaries known at design time (e.g., age limits, fixed price ranges). |
| JavaScript Validation | Dynamic boundaries that change based on other inputs or complex business rules. |
| Server-Side Validation | Mandatory security check. Never rely solely on HTML attributes. |
Practice
Guided Exercise: Create an input for a temperature setting that accepts values between -10 and 40 degrees Celsius. Use type="number".
Challenge: Add a step="0.5" attribute to allow half-degree increments. Verify that entering "10.2" triggers a validation error in your browser.
Quick check
Q: What happens if a user enters a date earlier than the min attribute value?
A: The browser marks the input as invalid (usually with a red outline) and prevents form submission until corrected.
Summary
The min and max attributes provide a declarative way to enforce value ranges directly in HTML. While they enhance user experience and accessibility, they must always be paired with robust server-side validation to ensure data integrity and security.