Skip to content
Related Articles

Related Articles

Improve Article

HTML | DOM Input Search Object

  • Last Updated : 13 Feb, 2019

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.
maxIt is used for setting or returning the value of the max attribute of the search field.
minSets or returns the value of the min attribute of 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.

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 =”datetime-local” .




<!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
  • Internet Explorer
  • Firefox
  • Google Chrome
  • Apple Safari

Attention reader! Don’t stop learning now. Get hold of all the important Comcompetitivepetitve Programming concepts with the Web Design for Beginners | HTML  course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :