Module 11: Advanced HTML Forms and Validation
required, min, max, and pattern
Apply native constraints that help visitors correct common form mistakes.
HTML form controls can enforce basic constraints before a browser submits a form. Common attributes include required, min, max, minlength, maxlength, step, and pattern.
<label for="age">Age</label>
<input id="age" name="age" type="number" min="18" max="100" required>
<label for="code">Five-character booking code</label>
<input id="code" name="code" pattern="[A-Z0-9]{5}" required>
The browser checks the value according to the control type and its constraints. If the value is invalid, it can prevent submission and display a browser-provided message. Exact wording and presentation vary by browser and language.
The pattern attribute uses JavaScript regular-expression syntax, but it only checks the value against a pattern. It does not prove that a phone number is assigned, an email address exists, or a user is authorized to perform an action.
Use clear instructions next to constraints. A field that expects five uppercase characters should say so. Server-side validation is still required because a request can be constructed without using the form.