Skip to content
Related Articles

Related Articles

HTML | DOM Input Search Object

View Discussion
Improve Article
Save Article
  • Last Updated : 05 Jul, 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:

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

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!