HTML DOM Input Search Object

Last Updated : 02 Jan, 2024

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:

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>