The required attribute marks a field as mandatory — the browser blocks form submission entirely until it has a value.
Syntax
<input type="text" name="fullname" required>Basic Example
<label for="name">Full Name</label>
<input type="text" id="name" name="name" required>Browser output: attempting to submit with this field empty shows a native "Please fill out this field" message and keeps the form from submitting at all.
How It Works
required is a boolean attribute — its mere presence turns it on; there's no value to set (writing required="required" is equally valid but unnecessary). It works across most field types: text inputs, <select>, <textarea>, checkboxes, and radio groups.
Important Attributes
| Element | What "required" means there |
|---|---|
<input> / <textarea> | Cannot be left empty |
<select> | A real option (not an empty placeholder) must be chosen |
<input type="checkbox"> | Must be checked (common for "I agree to the Terms" checkboxes) |
<input type="radio"> | At least one button in the shared-name group must be selected |
Real-World Example
<input type="checkbox" id="terms" name="terms" required>
<label for="terms">I agree to the Terms and Conditions</label>A required checkbox — a common, legally significant pattern for forms that need explicit consent before submission is allowed at all.
Common Mistakes
- Marking every single field as
requiredby default, without genuinely considering whether each one is truly mandatory — this creates unnecessary friction - Relying on
requiredalone for genuine security-sensitive validation, without also checking server-side
Best Practices
- Mark a field
requiredonly when it's genuinely mandatory for the form to make sense - Pair it with a clearly visible visual indicator (like an asterisk) alongside its label, not relying on the native error message alone
Accessibility Considerations
Screen readers announce required fields explicitly (often as "required" spoken alongside the label), giving users that context before they even start typing — a real, direct accessibility benefit.
SEO Considerations
No direct ranking effect.
Browser & Modern HTML Notes
Universally supported and works identically across all modern browsers — one of the most reliable pieces of HTML5's validation system.
Mini Practice
- Add
requiredto the essential fields of a short signup form, leaving genuinely optional ones (like a phone number) without it. - Build a required checkbox for terms agreement and test submitting without checking it.
