- 1HTML Forms
- 2HTML form Tag
- 3HTML Input Types
- 4HTML Labels and Placeholders
- 5HTML Select Dropdown
- 6HTML Checkbox
- 7HTML Radio Buttons
- 8HTML Textarea
- 9HTML Submit and Reset Buttons
- 10HTML Form Validation
- 11HTML Required Fields
- 12HTML Input Pattern Attribute
- 13HTML min and max Attribute
- 14HTML Form Action and Method
- 15HTML Fieldset and Legend
- 16HTML Form Advanced Controls
- 17HTML Date Picker
- 18HTML Range Slider
- 19HTML Color Picker
- 20HTML File Upload
- 21HTML Datalist
- 22HTML Autofocus and Autocomplete


- 1HTML Forms
- 2HTML form Tag
- 3HTML Input Types
- 4HTML Labels and Placeholders
- 5HTML Select Dropdown
- 6HTML Checkbox
- 7HTML Radio Buttons
- 8HTML Textarea
- 9HTML Submit and Reset Buttons
- 10HTML Form Validation
- 11HTML Required Fields
- 12HTML Input Pattern Attribute
- 13HTML min and max Attribute
- 14HTML Form Action and Method
- 15HTML Fieldset and Legend
- 16HTML Form Advanced Controls
- 17HTML Date Picker
- 18HTML Range Slider
- 19HTML Color Picker
- 20HTML File Upload
- 21HTML Datalist
- 22HTML Autofocus and Autocomplete




- 1Accessibility in HTML
- 2Alt Text for Images
- 3ARIA Roles in HTML
- 4Semantic HTML for Accessibility
- 5Keyboard Navigation in HTML
- 6Screen Reader Accessibility in HTML
- 7HTML Best Practices for SEO
- 8HTML Meta Tags
- 9HTML Headings Best Practices
- 10Title and Meta Description Tags in HTML
- 11HTML Linking Structure
- 12HTML Clean Code Standards

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 sentmethod
: How the data is sent (get
orpost
)
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
andmax
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
, andmax
for field-level rules - Control form behavior with
action
andmethod
- Group and label sections using
fieldset
andlegend
What’s Next?
Next, we’ll explore Custom Validation and Feedback — for creating even more helpful, interactive forms with CSS and JavaScript enhancements.