HTML DOM Input Search Object
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 >w3wiki</ h1 > < h2 >HTML DOM Input Search Object</ h2 > < button onclick = "myBeginner()" > Create Search Box </ button > < br >< br > < script > function myBeginner() { // 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 >w3wiki</ h1 > < h2 >HTML DOM Input Search Object</ h2 > < input type = "Search" id = "test" placeholder = "Type to search..." > < br >< br > < button onclick = "myBeginner()" > Get Searched Text </ button > < p id = "check" ></ p > < script > function myBeginner() { // 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