HTML & CSS Interview Question #37

What are min, max, minlength, maxlength, and pattern used for?

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

Quick Interview Answer

These attributes add browser-side constraints to supported form controls. min and max define allowed numeric or date ranges, minlength and maxlength constrain text length, and pattern supplies a regular expression that a value must match.

Detailed Explanation

These attributes add browser-side constraints to supported form controls. min and max define allowed numeric or date ranges, minlength and maxlength constrain text length, and pattern supplies a regular expression that a value must match.

HTML constraint validation improves user experience but can be bypassed. The server must independently validate all untrusted input according to the application's business rules.

Code Example

<label for="age">Age</label>
<input id="age"
       name="age"
       type="number"
       min="18"
       max="100">

<label for="code">Code</label>
<input id="code"
       name="code"
       minlength="4"
       maxlength="10"
       pattern="[A-Z0-9]+">