HTML pattern Attribute

Introduction

The pattern attribute lets you validate text-like form inputs with a regular expression. The browser checks that the entire value matches your pattern before the form submits (when combined with required or on checkValidity()). Use it for phone formats like XXX-XXX-XXXX, usernames, or postal codes. It works on text, search, tel, url, email, and password — not on number or date. Add a title attribute for a clearer validation message. Always validate again on the server — client-side checks can be bypassed.

What You’ll Learn

Purpose of pattern Attribute

The primary purpose of pattern is to enforce a specific text format on form input — so users enter data that matches your rules before submit. Phone numbers, usernames, and ID codes are common use cases where a simple regex catches obvious mistakes early.

The pattern is matched against the whole field value (the browser adds start/end anchors automatically). Pair with placeholder and helper text so users know the expected format. Use type="email" for basic email checks; add pattern only when you need stricter rules.

📝 Syntax

Add pattern with a regex string on a supported input:

<label for="phone">Phone number:</label>
<input
  type="tel"
  id="phone"
  name="phone"
  pattern="\d{3}-\d{3}-\d{4}"
  placeholder="555-123-4567"
  title="Use format XXX-XXX-XXXX"
  required>

Syntax Rules

• Value is a regular expression string (no delimiters like /.../).
• Valid on text, search, tel, url, email, password.
• Not valid on number, date, checkbox, file, etc.
• The entire value must match — anchors are implicit.
• Add title to describe the expected format in validation UI.
• Often used with required so empty values also fail submit.
• JavaScript: input.pattern = "[A-Za-z]{3}" or setAttribute("pattern", …).

💎 Values

The pattern attribute accepts any valid regular expression for the field:

• pattern="\d{3}-\d{3}-\d{4}" — US-style phone 555-123-4567.
• pattern="[A-Za-z]{3}" — Exactly three letters.
• pattern="[A-Za-z0-9_]{3,16}" — Username 3–16 alphanumeric/underscore.
• pattern="[0-9]{5}" — Five-digit postal code.

<!-- Phone on type="tel" (recommended over redundant email regex) -->
<input type="tel" pattern="\d{3}-\d{3}-\d{4}" title="XXX-XXX-XXXX">

<!-- Username -->
<input type="text" pattern="[A-Za-z0-9_]{3,16}" title="3–16 letters, numbers, or _">

Applicable Elements

pattern vs type="email" vs minlength

Examples Gallery

Phone format validation, dynamic pattern assignment, and username rules with title.

<form>
  <label for="phone">Phone number:</label>
  <input
    type="tel"
    id="phone"
    name="phone"
    pattern="\d{3}-\d{3}-\d{4}"
    placeholder="555-123-4567"
    title="Enter phone as XXX-XXX-XXXX"
    required>
  <p>Format: XXX-XXX-XXXX</p>
  <button type="submit">Submit</button>
</form>

<input type="text" id="dynamicPatternField" required>

<script>
  document.getElementById("dynamicPatternField").pattern = "[A-Za-z]{3}";
</script>

<input
  type="text"
  name="username"
  pattern="[A-Za-z0-9_]{3,16}"
  title="3–16 letters, numbers, or underscores"
  required>

♿ Accessibility

• Visible instructions — Do not rely on pattern alone; show the expected format in plain text near the field.
• title attribute — Helps some browsers show why validation failed; not a substitute for a visible label or hint.
• Associate labels — Every input needs a <label for="…">.
• Error messaging — Consider setCustomValidity() in JavaScript for clearer messages than raw regex.
• Do not block assistive tech — Invalid state is announced; keep hints concise and actionable.

💡 Best Practices