What does the novalidate attribute do?

novalidate disables native browser validation, letting you handle validation entirely with JavaScript. Remove it to re-enable the built-in browser validation UI.

Do I still need server-side validation with HTML5 attributes?

Yes, always. Browser validation can be bypassed by disabling JavaScript or making direct HTTP requests. Server-side validation is the only reliable security boundary.

How do I style invalid form fields with CSS?

Use the :invalid and :valid pseudo-classes to style fields that fail or pass browser validation. The :user-invalid pseudo-class only activates after the user has interacted with the field.

Format an HTML Form with Validation

HTML5 provides built-in browser validation through attributes like required, type, pattern, and minlength, reducing the need for JavaScript validation. This example shows a registration form with several validation constraints. Formatting the HTML makes attribute relationships clear and helps you verify that every input has a matching label for accessibility. Test native validation by submitting with empty or invalid fields.

Example

<form method="post" action="/register" novalidate>
  <div>
    <label for="name">Full Name</label>
    <input type="text" id="name" name="name" required minlength="2" maxlength="100" placeholder="Jane Smith">
  </div>
  <div>
    <label for="email">Email</label>
    <input type="email" id="email" name="email" required autocomplete="email">
  </div>
  <div>
    <label for="password">Password</label>
    <input type="password" id="password" name="password" required minlength="8" pattern="(?=.*d)(?=.*[A-Z]).{8,}">
    <small>Min 8 characters, one uppercase, one number.</small>
  </div>
  <button type="submit">Create Account</button>
</form>

[ open in HTML Formatter → ]

FAQ

What does the novalidate attribute do?: novalidate disables native browser validation, letting you handle validation entirely with JavaScript. Remove it to re-enable the built-in browser validation UI.
Do I still need server-side validation with HTML5 attributes?: Yes, always. Browser validation can be bypassed by disabling JavaScript or making direct HTTP requests. Server-side validation is the only reliable security boundary.
How do I style invalid form fields with CSS?: Use the :invalid and :valid pseudo-classes to style fields that fail or pass browser validation. The :user-invalid pseudo-class only activates after the user has interacted with the field.

Related Examples

Format a Semantic HTML Page Structure

Semantic HTML uses elements that describe meaning rather than just presentation,...

Format HTML Meta Tags

Meta tags in the <head> control how search engines index your page and how it ap...

Format a CSS Custom Properties File

CSS custom properties (variables) defined on :root create a design token system ...