Open In App
Related Articles

HTML | DOM Input Search Object

Improve Article
Improve
Save Article
Save
Like Article
Like

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:

ValueDescription
autocompleteIt is used for setting or returning the value of the autocomplete attribute of a search field.
autofocusIt is used for setting or returning whether a search field should automatically get focus when the page loads.
defaultValueIt is used for setting or returning the default value of a search field.
disabledIt is used for setting or returning whether a search field is disabled, or not.
formIt is used for returning a reference to the form that contains the search field.
listIt is used for returning a reference to the datalist that contains the search field.
nameIt is used for setting or returning the value of the name attribute of a search field.
readOnlyIt is used for setting or returning whether the search field is read-only, or not.
requiredIt is used for setting or returning whether the search field must be filled out before submitting a form.
stepIt is used for setting or returning the value of the step attribute of the search field.
typeIt is used for returning which type of form element the search field is.
valueIt 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” . 

html




<!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” . 

html




<!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>

Output: 

Before clicking the button:

  

After clicking the button:

  

Supported Browsers:

  • Opera 10.6
  • Internet Explorer 10
  • Firefox 4
  • Google Chrome 5
  • Edge 12
  • Apple Safari 5

Last Updated : 05 Jul, 2022
Like Article
Save Article
Similar Reads
Related Tutorials