How to Use the required Attribute for HTML5 Form Validation? (Simple Tutorial)

The required attribute of HTML5 can natively implement required form validation. Just add the required Boolean attribute to input, select or textarea, and the browser will automatically verify the non-null value when submitting. It supports text, email, drop-down, checkbox and text fields, but is not suitable for hidden and other types, and requires secondary verification on the server side.

The required attribute in HTML5 is a built-in way to make form fields mandatory—no JavaScript needed. Just add required (a boolean attribute) to an input, select, or textarea element, and the browser will prevent form submission if that field is empty or unset.

How to Add required to Common Form Elements

You can apply required directly to most form controls. It works the same whether you write required , required="" , or required="required" —browsers treat them identically.

• Text inputs: <input type="text" name="name" required>
• Email inputs: <input type="email" name="email" required>
• Select menus: <select name="role" required><option value="">Choose one</option> <option value="admin">Admin</option></select> — note: include an empty value option as the default to trigger validation
• Checkboxes: <input type="checkbox" name="agree" required> I agree to the terms — ensures the box must be checked
• Textareas: <textarea name="message" required></textarea>

What triggers the Validation Error?

The browser checks whether the field has a valid, non-empty value *at submission time*. For text fields, that means not blank (after trimming whitespace). For checkboxes, it means checked. For selects, it means a non-empty value is selected.

• An empty string ( "" ) or whitespace-only input fails validation
• A <select></select> with Select... as the first option will cause an error if left selected
• Radio groups need at least one option with required on the group—but only one required on any one <input type="radio"> is enough for the whole group

Styling and Customizing Required Fields

Browsers don't automatically style required fields, but you can use CSS pseudo-classes to highlight them:

• input:required { border: 2px solid #007bff; }
• input:invalid { background-color: #fff5f5; }
• input:valid { background-color: #f0fff0; }

You can also add visual cues like asterisks using the ::after pseudo-element:

Important Notes and Limitations

required is client-side only—it doesn't replace server-side validation. Always verify data on the backend too.

• It doesn't enforce format (eg, “email@domain.com” still needs type="email" or pattern matching)
• It doesn't work on type="hidden" , type="button" , or type="reset" inputs
• Dynamic removal or addition of required via JavaScript works, but avoid relying solely on JS to manage required state for accessibility
• Some older browsers (like IE9 and below) ignore required —use a lightweight polyfill or fallback if supporting legacy users

The above is the detailed content of How to Use the required Attribute for HTML5 Form Validation? (Simple Tutorial). For more information, please follow other related articles on the PHP Chinese website!