What is HTML5 Form Validation? | HTML Interview Questions

What You'll Learn

HTML5 validation attributes
CSS pseudo-classes for styling
Best practices

Built-in Validation

HTML5 form validation provides client-side validation without JavaScript. The browser checks inputs before submission and shows error messages automatically.

Validation Attributes

Attribute	Purpose
`required`	Must be filled
`minlength` / `maxlength`	Text length
`min` / `max`	Number range
`pattern`	Regex match
`type`	Auto-validates (email, url)

Code Example

index.htmlHTML

<form>
  <!-- Required field -->
  <input type="text" required placeholder="Required">

  <!-- Length constraints -->
  <input type="text" minlength="3" maxlength="20">

  <!-- Number range -->
  <input type="number" min="18" max="100">

  <!-- Pattern (regex) -->
  <input type="text" pattern="[A-Za-z]{3}" title="3 letters only">

  <!-- Auto-validating types -->
  <input type="email" required>
  <input type="url">

  <button type="submit">Submit</button>
</form>

Styling Validation States

styles.cssCSS

input:valid { border-color: green; }
input:invalid { border-color: red; }

Important

Always validate on server too - client validation improves UX but can be bypassed.