required
Makes a field mandatory before submission.
Platform under construction
HTML Validation Attributes
Learn required, minlength, maxlength, pattern, min, max, step as part of the HTML attribute system: what they configure, where they belong and which mistakes to avoid.
Validation
Validation attributes give users immediate feedback.
HTML validation attributes let the browser catch simple mistakes such as missing values, invalid email addresses, too-short text or numbers outside a range.
They are not a security layer. They are a usability layer. The server must still validate every submitted value.
Attribute group:
required, minlength, maxlength, pattern, min, max, step. Browser validation attributes that catch simple mistakes before submit. What belongs here
Learn attributes by purpose, not by memorizing random names.
minlength + maxlength
Controls text length.
pattern
Requires text to match a regular expression.
min + max
Sets number, range or date boundaries.
step
Controls increments for number/range inputs.
type
Some types have built-in validation, such as email and url.
Syntax in context
Validation attributes sit on the form control.
Combine the right input type with specific validation attributes for clear browser feedback.
<label for="postcode">Postcode</label> <input id="postcode" name="postcode" required minlength="6" maxlength="7"> <label for="email">Email</label> <input id="email" name="email" type="email" required>
Good versus weak
Small attribute choices can change behavior, accessibility and security.
Good
<label for="postcode">Postcode</label> <input id="postcode" name="postcode" required minlength="6" maxlength="7"> <label for="email">Email</label> <input id="email" name="email" type="email" required>
Weak
<input name="email"> <input name="postcode"> <button>Submit</button>
Rules that matter
Use these rules before publishing real HTML.
Use browser validation for help
It gives quick feedback before a request is sent.
Validate again on the server
Users can bypass or change HTML validation.
Keep messages understandable
A strict pattern without explanation can frustrate users.
Match input type and rules
Do not use pattern when a better input type already exists.
Production thinking
Attributes are tiny pieces of HTML with real product impact.
Why does this matter?
Attributes are small, but they change how an element works. A good attribute can make a link usable, an image understandable, a form easier to complete or a script safer to load.
Accessibility
Validation should explain what went wrong and how to fix it. Native validation is helpful but not always enough.
Production note
Good validation attributes reduce junk submissions, but serious filtering belongs on the backend too.
Live code lab
Change the code and run the example.
Edit the HTML or CSS, then use Run to refresh the preview. The preview is isolated, so links and forms stay inside this practice area.
Mini assignment
Try this now.
- Change one tag, attribute or text value in the example.
- Run the preview and describe exactly what changed.
- Reset the lab and repeat the same change without looking at the original.
Practice assignment
Do this before moving to the next lesson.
- Change one meaningful part of the HTML, not only the visible text.
- Run the preview and check whether the result still makes semantic sense.
- Explain why the element or attribute you changed belongs in this exact place.
Try it yourself
Native validation in action
Self-check
Before you continue, prove that you own this lesson.
Do not only read this page. Answer these questions out loud or write the answers in your own notes. If one answer feels vague, revisit the examples before moving on.
- Can you explain what problem this lesson solves in a real website?
- Can you identify the most important tag or attribute from this lesson?
- Can you name one accessibility mistake this lesson helps prevent?
- Can you write one good example and one weak example without copying the page?
- Can you explain when you would use this in production and when you would avoid it?