Introduction to Form Validation and Attributes - Required, Pattern, min, max, Fieldset

HTML Form Validation and Attributes: Guide the Right Input

Good forms don’t just ask for information — they help ensure that users give the right kind. With HTML5, many powerful validation rules are built in. You don’t need JavaScript to make sure users enter a valid email, set a minimum quantity, or fill out all required fields.

Required Fields with required

The simplest form of validation: making sure a field is filled before submission.

<form>
  <label for="name">Name (required):</label><br>
  <input type="text" id="name" name="name" required><br>
  <input type="submit" value="Submit">
</form>

Name (required): [              ]
[Submit]

Try submitting without typing anything — the browser will block it with a warning.

Pattern Matching with pattern

The pattern attribute uses regular expressions to match custom input formats.

<label for="fruit">Enter fruit name (only letters):</label><br>
<input type="text" id="fruit" name="fruit" pattern="[A-Za-z]+" required>

Enter fruit name (only letters): [             ]

This field only accepts alphabets. Numbers or symbols will trigger a validation error.

Using min and max Attributes

For numeric inputs, min and max define the valid range.

<label for="quantity">Choose a number between 1 and 5:</label><br>
<input type="number" id="quantity" name="quantity" min="1" max="5">

Choose a number between 1 and 5: [ ⬆️ ⬇️ ]

Trying to enter a value outside the range will prevent form submission.

Form action and method Revisited

Validation works best when you understand what happens on submit. These two attributes define that.

<form action="/process-form" method="post">
  <input type="text" name="name" required>
  <input type="submit" value="Go">
</form>

• action: URL where the form data is sent
• method: How the data is sent (get or post)

get shows form data in the URL, post keeps it hidden.

Grouping with <fieldset> and <legend>

Use <fieldset> to group related inputs together, and <legend> to provide a title for that group.

<fieldset>
  <legend>Fruit Preferences</legend>
  <input type="checkbox" id="apple" name="fruit" value="apple">
  <label for="apple">Apple</label><br>
  <input type="checkbox" id="banana" name="fruit" value="banana">
  <label for="banana">Banana</label>
</fieldset>

Fruit Preferences
☐ Apple  
☐ Banana

This helps create cleaner forms — both visually and semantically.

Full Example: Validated Fruit Survey

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

  <label for="name">Name:</label><br>
  <input type="text" id="name" name="name" required><br><br>

  <label for="age">Age (18 to 99):</label><br>
  <input type="number" id="age" name="age" min="18" max="99" required><br><br>

  <label for="fruit">Favorite Fruit (letters only):</label><br>
  <input type="text" id="fruit" name="fruit" pattern="[A-Za-z]+" required><br><br>

  <fieldset>
    <legend>Select at least one:</legend>
    <input type="checkbox" id="apple" name="fruits[]" value="apple">
    <label for="apple">Apple</label><br>
    <input type="checkbox" id="banana" name="fruits[]" value="banana">
    <label for="banana">Banana</label>
  </fieldset><br>

  <input type="submit" value="Submit">
  <input type="reset" value="Clear">
</form>

Name: [               ]
Age (18 to 99): [ ⬆️ ⬇️ ]
Favorite Fruit: [             ]

Select at least one:
☐ Apple  
☐ Banana  

[Submit] [Clear]

Best Practices

• Always use required for critical fields
• Use pattern for custom input validation
• Apply min and max for numeric ranges
• Wrap related inputs with <fieldset> for clarity
• Label clearly and offer hints with placeholder

Summary

HTML form attributes offer a simple way to validate user input — with no JavaScript required. You’ve learned how to:

• Use required, pattern, min, and max for field-level rules
• Control form behavior with action and method
• Group and label sections using fieldset and legend

What’s Next?

Next, we’ll explore Custom Validation and Feedback — for creating even more helpful, interactive forms with CSS and JavaScript enhancements.