HTML & CSS Interview Question #35

What is the difference between required, readonly, and disabled form controls?

Forms, Validation, Metadata, Media, Responsive Images & Accessibility Junior Beginner

Quick Interview Answer

required participates in constraint validation and indicates that a value must be provided before normal form submission. readonly prevents the user from editing certain supported controls while their value can still be submitted.

Detailed Explanation

required participates in constraint validation and indicates that a value must be provided before normal form submission. readonly prevents the user from editing certain supported controls while their value can still be submitted.

disabled makes a control non-interactive and generally excludes it from form submission and constraint validation. The exact attribute to use should match the business meaning rather than being selected only for visual appearance.

Code Example

<input name="email"
       type="email"
       required>

<input name="accountId"
       value="A100"
       readonly>

<input name="internalCode"
       value="X1"
       disabled>