HTML Form Validation

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.

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.

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.

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.

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.

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.

<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]

• 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

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

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

1. required
2. pattern
3. maxlength
4. optional

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

1. <input type="email" required>

2. <input type="number" min="10" max="100">

3. <input type="text" pattern="[A-Za-z]{3,}">

4. <input type="text" optional>

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