HTML Tutorials

Ensuring a value matches a pattern

The pattern attribute ensures that a value matches a regular expression.

Using the pattern attribute
    <meta name="author" content="Adam Freeman"/>
    <meta name="description" content="A simple example"/>
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <form method="post" action="http://titan:8080/form">
      <input type="hidden" name="recordID" value="1234"/>
        <label for="name">
          <input type="text" id="name" name="name" pattern="^.* .*$"/>
        <label for="password">
          Password: <input type="password" placeholder="Min 6 characters" id="password" name="password"/>
      <input type="submit" value="Submit"/>

Here, we have applied a simple pattern to ensure that the user enters two names, separated by a space. This is not a sensible way of validating that a value is a name, because it ignores all of the regional variations for names, but it does provide a suitable example of the validation support. You can see how the browser displays a pattern validation error below.