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:
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:
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 >
|
Output:Â
Supported Browsers:
- Opera 10.6
- Internet Explorer 10
- Firefox 4
- Google Chrome 5
- Edge 12
- Apple Safari 5
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...