Open In App

HTML DOM Input Search Object

Last Updated : 02 Jan, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

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

Syntax:

  • For creating a <input> element with the type =”search”:
let input_field = document.createElement("input");
input_field.setAttribute("type", "search");
  • Syntax for accessing a <input> element with the type =”search”:
let search_element = document.getElementById("search_object");

Property Values:

Property Value

Description

autocomplete

Set or return the value of the autocomplete attribute of a search field.

autofocus

Set or return whether a search field should automatically get focus when the page loads.

defaultValue

Set or return the default value of a search field.

disabled

Set or return whether a search field is disabled, or not.

form

Returns a reference to the form that contains the search field.

list

Returns a reference to the datalist that contains the search field.

name

Set or return the value of the name attribute of a search field.

readOnly

Set or return whether the search field is read-only, or not.

required

Set or return whether the search field must be filled out before submitting a form.

step

Set or return the value of the step attribute of the search field.

type

Returns the type of form element of the search field.

value

Set or return the value of the value attribute of a search field.

Methods:

Method Name

Description

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.

Example 1: Creating an <input> element with the type =”search”. 

html




<!DOCTYPE html>
<html>
 
<head>
    <title>HTML DOM Input Search Object</title>
</head>
 
<body style="text-align: center;">
    <h1>GeeksforGeeks</h1>
 
    <h2>HTML DOM Input Search Object</h2>
 
    <button onclick="myGeeks()">
        Create Search Box
    </button>
    <br><br>
 
    <script>
        function myGeeks() {
 
            // Create input element with type search
            let input_field = document.createElement("input");
            input_field.setAttribute("type", "search");
            document.body.appendChild(input_field);
        }
    </script>
</body>
 
</html>


Output: 

input-search

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

html




<!DOCTYPE html>
<html>
 
<head>
    <title>HTML DOM Input Search Object</title>
</head>
 
<body style="text-align: center;">
    <h1>GeeksforGeeks</h1>
 
    <h2>HTML DOM Input Search Object</h2>
 
    <input type="Search" id="test"
        placeholder="Type to search...">
    <br><br>
 
    <button onclick="myGeeks()">
        Get Searched Text
    </button>
 
    <p id="check"></p>
 
    <script>
        function myGeeks() {
 
            // Accessing value of input element
            // type="search"
            let input_search =
                document.getElementById("test").value;
 
            document.getElementById("check").innerHTML
                = "Searched Text: " + input_search;
        }
    </script>
</body>
 
</html>


Output: 

input-search-2

Supported Browsers:

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


Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads