Patterns

  

  • Your source for sewing accessories, trim, ribbon, appliques, craft supplies, knitting needles, quilting tools, and more!
  • Find great patterns at Simplicity.com. With the top quality patterns, Simplicity patterns are sure to spark your creativity.
  • All Free Patterns. Recently viewed. Lion Brand® Yarn Company is a fifth generation, family-owned business. We are passionate about helping people enjoy the pleasures of working with yarn. Lion Brand® yarns are sold online, at craft chains, discount chains and independent shops across the United States.
  • WowPatterns is the world’s first free patterns marketplace with a collection of over 3000+ patterns made by a passionate designers. All the patterns are totally free for commercial and personal use.

Example

Forever part of our iconic style, our colorful patterns are nearly synonymous with the Vera Bradley name. Perfectly imperfect in every way, each hand-drawn work of art shares the same hallmarks: optimistic, happy, charming, energetic and joyful. We like to think of.

An HTML form with an input field that can contain only three letters (no numbers or special characters):

Patterns Of Evidence

<form action='/action_page.php'>
<label for='country_code'>Country code:</label>
<input type='text' name='country_code'
pattern='[A-Za-z]{3}'><br><br>
<input type='submit'>
</form>
Try it Yourself »

More 'Try it Yourself' examples below.

Definition and Usage

Patterns

The pattern attribute specifies a regular expression that the <input> element's value is checked against on form submission.

Note: The pattern attribute works with the following input types: text, date, search, url, tel, email, and password.

Tip: Use the global title attribute to describe the pattern to help the user.

Tip: Learn more about regular expressions in our JavaScript tutorial.

Browser Support

The numbers in the table specify the first browser version that fully supports the attribute.

Attribute
pattern5.010.04.010.19.6

Syntax

Attribute Values

ValueDescription
regexpSpecifies a regular expression that the <input> element's value is checked against

More Examples

Example

An <input> element with type='password' that must contain 8 or more characters:

<form action='/action_page.php'>
<label for='pwd'>Password:</label>
<input type='password' name='pwd'
pattern='.{8,}'>
<input type='submit'>
</form>

Patterns

Try it Yourself »Patterns

Example

An <input> element with type='password' that must contain 8 or more characters that are of at least one number, and one uppercase and lowercase letter:

<form action='/action_page.php'>
<label for='pwd'>Password:</label>
<input type='password' name='pwd'
pattern='(?=.*d)(?=.*[a-z])(?=.*[A-Z]).{8,}'
>
<input type='submit'>
</form>
Try it Yourself »

Example

Face mask pattern

An <input> element with type='email' that must be in the following order: characters@characters.domain (characters followed by an @ sign, followed by more characters, and then a '.'

Patterns for pirates

After the '.' sign, add at least 2 letters from a to z:

Free Printable Patterns

<form action='/action_page.php'>
<label for='email'>Email:</label>
<input type='email' name='email'
pattern='[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,}$'>
<input type='submit'>
</form>
Try it Yourself »

Example

An <input> element with type='search' that CANNOT contain the following characters: ' or '

<form action='/action_page.php'>
<label for='search'>Search:</label>
<input type='search' name='search'
pattern='[^'x22]+'>
<input type='submit'>
</form>
Try it Yourself »

Example

An <input> element with type='url' that must start with http:// or https:// followed by at least one character:

<form action='/action_page.php'>
<label for='website'>Homepage:</label>
<input type='url' name='website'
pattern='https?://.+'>
<input type='submit'>
</form>
Try it Yourself »❮ HTML <input> tag