HTML Input Pattern Attribute

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.

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.

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

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

<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.

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 ]

<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.

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.

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.

<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]

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

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

Choose the option that lists all and only the correct statements.

1. Restricting mobile number to 10 digits
2. Forcing names to contain only letters
3. Allowing file uploads
4. Validating email format without using type="email"

Choose the option that lists all and only the correct statements.

1. <input type="text" pattern="\d{10}" required>

2. <input type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}">

3. <input type="number" pattern="\d{4}">

4. <input type="text" pattern="[A-Za-z ]+">

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.