HTML5 Regular Expressions with Pattern

HTML5 Regular Expressions with Pattern

Regular Expressions have been built directly into HTML5 through the Pattern attribute.

HTML5 has brought so many common functions for web developers directly into the spec in order to reduce use of Javascript and other technologies for things which are needed so frequently.

The Pattern attribute can be added to your inputs and accept regular expression patterns as shown in the simple example below. You can extend from this example as far and as complicated as you wish to make your regular expression.


Please note, that several HTML5 form attributes, including pattern, have poor support on older versions of Internet Explorer and so, for the time being, you will probably need to provide a backup for them. Plugins such as Modernizr can help to keep things tidy and organised when you consider how to provide fallbacks.

See below for another example, courtesy of Kevin Jones.


Further Reading on HTML5 Regular Expressions

Leave a Reply

Your email address will not be published. Required fields are marked *