HTML Reference Manual

HTML Tag大全

HTML: <input> pattern Attribute

This article introduces the usage of the HTML input pattern attribute, online examples demonstrate how to use the HTML input pattern attribute, browser compatibility, syntax definition, and detailed information about its attribute values, etc.

　HTML <input> tag

Online Example

An HTML form whose input field can only contain three letters (cannot contain numbers or special characters):

Example

<!DOCTYPE html>
<html>
<head>
<title>HTML: <input> pattern Attribute　-　Basic Tutorial Website(oldtoolbag.com)</title>
<body>
<form action="action_page.php">
　　Country/Country Code: <input type="text" name="country_code" pattern="[A-Za-z]{3" title="3a letter country/Country Code">
　　<input type="submit">
</form>
</html>

Test to see ‹/›

Browser Compatibility

IEFirefoxOperaChromeSafari

Internet Explorer 10, Firefox, Opera, and Chrome support the pattern attribute.

Note:Safari or Internet Explorer 9 and earlier versions do not support the pattern attribute of the <input> tag.

Definition and Usage

The pattern attribute specifies a regular expression that checks the value of the <input> element when the form is submitted.

Note:pattern attribute is applicable to the following input types: text, search, url, tel, email, and password.

Tip:Please use the global title attribute to describe the pattern to help users.

Tip:You can learn more about it in our JavaScript tutorial. Regular Expression knowledge.

HTML 4.01 and HTML5difference between

pattern attribute is an HTML5 new attribute added in

Syntax

<input pattern="regexp">

Attribute Value

Value	Description
regexp	Specifies a regular expression that defines a pattern for validating the value of an <input> element.

　HTML <input> tag

HTML: <template> tag