HTML | DOM Input Search Object

Last Updated : 07 Mar, 2022

The Input Search object is used for representing an HTML <input> element of the type=”search”.
The Input Search Object is a new object in HTML5.

Syntax:

For creating a <input> element with the type =”search”:

var gfg = document.createElement("input");
gfg.setAttribute("type", "search");

Syntax For accessing a <input> element with the type =”search”:
```
var s = document.getElementById("search_object");
```

Property Values:

Value	Description
autocomplete	It is used for setting or returning the value of the autocomplete attribute of a search field.
autofocus	It is used for setting or returning whether a search field should automatically get focus when the page loads.
defaultValue	It is used for setting or returning the default value of a search field.
disabled	It is used for setting or returning whether a search field is disabled, or not.
form	It is used for returning a reference to the form that contains the search field.
list	It is used for returning a reference to the datalist that contains the search field.
name	It is used for setting or returning the value of the name attribute of a search field.
readOnly	It is used for setting or returning whether the search field is read-only, or not.
required	It is used for setting or returning whether the search field must be filled out before submitting a form.
step	It is used for setting or returning the value of the step attribute of the search field.
type	It is used for returning which type of form element the search field is.
value	It is used for setting or returning the value of the value attribute of a search field.

Methods

focus() : It is used to get focus to the input search field.
blur () : It is used to remove focus from the search field.
select () : It is used to select the content of the Input search field.

Below programs illustrate the Search Object :
Example-1: Creating a <input> element with the type =”search” .

<!DOCTYPE html>
<html>
  
<head>
    <title>Input Search Object</title>
    <style>
        h1 {
            color: green;
        }
          
        h2 {
            font-family: Impact;
        }
          
        body {
            text-align: center;
        }
    </style>
</head>
  
<body>
  
    <h1>GeeksforGeeks</h1>
    <h2>Input Search Object</h2>
  
    <p>Double Click the "Create" 
      button to create a search field.</p>
  
    <button ondblclick="Create()">Create
  </button>
  
    <script>
        function Create() {
            
            // Create input element with type search.
            var s = document.createElement("INPUT");
            s.setAttribute("type", "search");
            document.body.appendChild(s);
        }
    </script>
  
</body>
  
</html>

Output:

Before clicking the button:

After clicking the button:

Example-2: Accessing a <input> element with the type =”Search” .

<!DOCTYPE html>
<html>
  
<head>
    <title>Input Search Object</title>
    <style>
        h1 {
            color: green;
        }
          
        h2 {
            font-family: Impact;
        }
          
        body {
            text-align: center;
        }
    </style>
</head>
  
<body>
  
    <h1>GeeksforGeeks</h1>
    <h2>Input Search Object</h2>
  
    <input type="Search" 
           id="test"
           placeholder="Type to search..">
  
    <p>Double Click the "Access" button to 
      access a search field.</p>
  
    <button ondblclick="Access()">Access
  </button>
  
    <p id="check"></p>
  
    <script>
        function Access() {
            
            // Accessing value of input element
            // type="search" 
            var s = document.getElementById(
              "test").value;
            document.getElementById(
              "check").innerHTML = s;
        }
    </script>
  
</body>
  
</html>