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.

QUIZ

Question 1:Which attribute is used to make an input field mandatory before form submission?

validate
required
mustfill
notnull

Question 2:The `min` and `max` attributes are only valid with number-based input types.

True
False

Question 3:Which of the following are valid HTML input attributes for form validation?

required
pattern
maxlength
optional

Question 4:What is the purpose of using `<fieldset>` and `<legend>` in a form?

To validate all inputs inside
To reset fields grouped together
To visually and semantically group related form elements
To make fields read-only

Question 5:Using `pattern` in an input field allows you to enforce specific character rules using regular expressions.

True
False

Question 6:Which of the following examples show correct use of form validation attributes?

```
<input type="email" required>
```

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

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

```
<input type="text" optional>
```

⬅ Previous TopicHTML Submit and Reset Buttons

Next Topic ⮕HTML Required Fields

Comments

Loading comments...

Introduction to Form Validation and AttributesRequired, Pattern, min, max, Fieldset

HTML Form Validation and Attributes: Guide the Right Input

Required Fields with required

Pattern Matching with pattern

Using min and max Attributes

Form action and method Revisited

Grouping with <fieldset> and <legend>