HTML DOM Input Search pattern property

HTML Web Development Front End Technology

The HTML DOM Input Search pattern property is used for setting or returning the pattern attribute of an input search field. It checks the search field time against a regular expression that is specified by the pattern property.

Syntax

Following is the syntax for −

Setting the pattern property −

searchObject.pattern = regexp

Here, regexp is a regular expression against which the search field is checked.

Example

Let us look at an example for the Input Search pattern property −

Live Demo

<!DOCTYPE html>
<html>
<body>
<h1>Input Search pattern property</h1>
<p>The time inside search field can either be of three numeric characters or 6 alphabet characters from a to g</p>
<form action="/Sample_page.php">
FRUITS: <input type="search" id="SEARCH1" name="fruits" pattern="[0-9]{3}|[a-g]{6}"
title="Three numeric character or 6 alphabet between a-g">
<input type="submit">
</form>
<br>
<button onclick="passPattern()">GET PATTERN</button>
<p id="Sample"></p>
<script>
   function passPattern() {
      var P = document.getElementById("SEARCH1").pattern;
      document.getElementById("Sample").innerHTML ="The pattern attribute value is"+ P;
   }
</script>
</body>
</html>