0Pricing
Frontend Academy · Lesson

Form Validation Attributes

Apply required, minlength, maxlength, pattern, min, max, and step attributes and style validation states with :valid and :invalid pseudo-classes.

Native Browser Validation

HTML5 provides built-in form validation via attributes. When a form is submitted, the browser validates each field. If validation fails, it shows a native error tooltip and prevents submission — no JavaScript needed for basic cases.

required

Adding required to an input, select, or textarea makes it mandatory. The browser shows an error if the field is empty when the form is submitted.

<input type="text" name="name" required>
<select name="plan" required>
  <option value="">Choose plan...</option>
  <option value="free">Free</option>
</select>

All lessons in this course

  1. Form Controls: input types select textarea
  2. ARIA and Accessibility: label role aria-*
  3. Semantic HTML5: semantic vs div soup
  4. Form Validation Attributes
← Back to Frontend Academy