HTML min and max Attribute

Forms should be helpful, not chaotic. If you're asking for a number, a date, or a quantity — it's wise to define what's acceptable. That's exactly what min and max do. These attributes guide user input, creating a controlled experience that’s accurate and intuitive.

Both min and max are used on form fields like number, range, and date. They restrict the input to a specific range of acceptable values.

<label for="qty">Select a quantity (1–10):</label><br>
<input type="number" id="qty" name="quantity" min="1" max="10">

Select a quantity (1–10): [ ⬆️ ⬇️ ]

Users can't enter a number less than 1 or more than 10. If they try, the browser will block the submission and highlight the error.

<label for="date">Select a date in May 2025:</label><br>
<input type="date" id="date" name="schedule"
        min="2025-05-01" max="2025-05-31">

Select a date in May 2025: [ 📅 ]

This limits the user to dates within May 2025 — useful for appointments, bookings, or deadlines.

<label for="rating">Rate the fruit (1–5):</label><br>
<input type="range" id="rating" name="rating" min="1" max="5">

Rate the fruit (1–5): [ ●——— ]

Users can drag the slider only between 1 and 5. Ideal for feedback and surveys.

Use step along with min and max to control the jump between values.

<input type="number" name="even" min="2" max="10" step="2">

[ 2, 4, 6, 8, 10 ] only allowed

This input only allows even numbers within the given range.

Browsers do not enforce min or max unless the field has a value. To make input required, use the required attribute too.

<input type="number" name="fruitCount" min="1" max="5" required>

Now, users are forced to enter a value between 1 and 5 before the form can be submitted.

• Don’t forget step when using range — it helps users land on valid values
• Pair with required if the field is mandatory
• Don’t set unrealistic limits — too strict can be just as bad as too loose

<form action="/submit-order" method="post">

  <label for="fruit">Select your fruit:</label><br>
  <select id="fruit" name="fruit" required>
    <option disabled selected>-- Choose one -->
    <option value="apple">Apple</option>
    <option value="banana">Banana</option>
    <option value="cherry">Cherry</option>
  </select><br><br>

  <label for="quantity">Quantity (1 to 5 only):</label><br>
  <input type="number" id="quantity" name="quantity" min="1" max="5" required><br><br>

  <input type="submit" value="Place Order">
</form>

Fruit: [ Apple ▼ ]  
Quantity: [ 1 ⬆️ ⬇️ ]  
[Place Order]

The min and max attributes help you create meaningful boundaries for form inputs. They prevent incorrect entries before they even reach your server. You’ve learned how to:

• Set minimum and maximum values for numbers, dates, and ranges
• Use step to control increments
• Pair with required for complete validation

Choose the option that lists all and only the correct statements.

1. number
2. date
3. range
4. email

Choose the option that lists all and only the correct statements.

1. <input type="number" name="age" min="5" max="18" required>

2. <input type="text" min="0" max="100">

3. <input type="date" min="2024-01-01" max="2024-12-31">

4. <input type="range" min="1" max="10">

In the next tutorial, we’ll group form fields using <fieldset> and <legend> — for clearer structure and better accessibility.