HTML Input Patterns - Regex Form Validation

HTML Input Patterns: Smarter Fields with Regex

Sometimes, it’s not enough to simply require a field. You want to make sure the data follows a specific format. That’s where the pattern attribute comes in — allowing you to apply regular expressions (regex) directly to your form fields.

What Is the pattern Attribute?

pattern is used in HTML form fields to specify a regular expression that the input must match. If the input doesn’t match the regex, the form will not submit, and the user will see a validation error.

Basic Syntax

<input type="text" name="fruit" pattern="[A-Za-z]+" required>

This pattern allows only letters (uppercase and lowercase) — no numbers, no symbols.

Example: Letters Only (Fruit Name)

<label for="fruit">Enter fruit name:</label><br>
<input type="text" id="fruit" name="fruit" pattern="[A-Za-z]+" required>

Enter fruit name: [ Apple ]

If a user types “Cherry123”, the browser blocks the form submission with a warning.

Example: Numbers Only

Only allow digits 0–9 using pattern="\d+":

<label for="code">Enter numeric code:</label><br>
<input type="text" id="code" name="code" pattern="\d+" required>

Enter numeric code: [ 12345 ]

Example: Starts with "Item" + space + number

<label for="item">Item Format: Item 1, Item 2, etc.</label><br>
<input type="text" id="item" name="item" pattern="Item\s\d+" required>

Item Format: [ Item 1 ]

This field only allows values like “Item 1”, “Item 2”, etc. Spaces and structure matter.

Example: Simple Email Validation

While type="email" handles most cases, here’s how you could apply a basic pattern:

<label for="email">Email:</label><br>
<input type="text" id="email" name="email" 
        pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" required>

Email: [ hello@example.com ]

This regex checks for basic email structure, but for most uses, type="email" is simpler.

Combining pattern with Placeholder and Title

Give users a hint using placeholder, and add a title to explain what the pattern expects.

<input type="text" name="fruit" 
        pattern="[A-Za-z]+" 
        placeholder="e.g., Apple" 
        title="Only letters allowed" 
        required>

[ e.g., Apple ]

When a user enters an invalid value, the browser displays the message from the title attribute.

Summary of Common Patterns

Pattern	Description
[A-Za-z]+	Only letters
\d+	Only numbers
[a-z]{3,}	Lowercase, at least 3 letters
Item\s\d+	"Item" followed by space and number
[A-Z][a-z]+	Capital first letter, rest lowercase

Full Form Example with Patterns

<form action="/validate" method="post">

  <label for="fruit">Fruit Name (letters only):</label><br>
  <input type="text" id="fruit" name="fruit" pattern="[A-Za-z]+" required><br><br>

  <label for="item">Item Format (Item 1, Item 2):</label><br>
  <input type="text" id="item" name="item" pattern="Item\s\d+" required><br><br>

  <input type="submit" value="Submit">
</form>

Fruit Name: [ Apple ]  
Item Format: [ Item 2 ]  
[Submit]

Best Practices

• Keep patterns simple for user understanding
• Always add a title to explain the pattern
• Test in multiple browsers to ensure consistent validation behavior

Summary

The pattern attribute gives you control over the shape and format of user input — helping ensure your data is clean and meaningful. You’ve learned how to:

• Apply regex-based validation using pattern
• Use common patterns like letters-only, numbers-only, and structured strings
• Combine pattern with required, placeholder, and title for better UX

What’s Next?

Now that your forms are validated, it’s time to style and polish them with CSS — so users not only interact but enjoy doing so.