HTML Form Validation

Intermediate ~10 min read

HTML5 Form Validation

HTML5 provides built-in form validation without JavaScript. The browser automatically validates input before submission.

The Required Attribute

The required attribute makes a field mandatory. The form won't submit until it's filled.

HTML

CSS

<form>\n  <label>Username (required):</label><br>\n  <input type="text" name="user" required><br><br>\n  <label>Email (required):</label><br>\n  <input type="email" name="email" required><br><br>\n  <button type="submit">Submit</button>\n</form>

The Pattern Attribute

The pattern attribute specifies a regular expression that the input must match.

HTML

CSS

<form>\n  <label>Phone (format: 123-456-7890):</label><br>\n  <input type="tel"\n         pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"\n         placeholder="123-456-7890"\n         title="Format: 123-456-7890"><br><br>\n  <button type="submit">Submit</button>\n</form>

Tip: Use the title attribute to explain the expected format to users.

Min, Max, and Length

min / max - For numbers and dates
minlength / maxlength - For text length
step - Specifies valid number intervals

HTML

CSS

<form>\n  <label>Age (18-100):</label><br>\n  <input type="number" min="18" max="100"><br><br>\n  <label>Password (8-20 chars):</label><br>\n  <input type="password" minlength="8" maxlength="20"><br><br>\n  <button type="submit">Submit</button>\n</form>

Other Validation Attributes

type="email" - Validates email format
type="url" - Validates URL format
type="number" - Only accepts numbers
readonly - Field cannot be modified
disabled - Field is disabled and not submitted

Quick Quiz

Which attribute uses regular expressions for validation?

required

pattern

validate

regex

Previous Form Attributes

Next Block vs Inline

HTML5 Form Validation

The Required Attribute

The Pattern Attribute

Min, Max, and Length

Other Validation Attributes

Quick Quiz

Enjoying these tutorials?