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 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:
Value | Description |
---|---|
autocomplete | It is used for setting or returning the value of the autocomplete attribute of a search field. |
autofocus | It is used for setting or returning whether a search field should automatically get focus when the page loads. |
defaultValue | It is used for setting or returning the default value of a search field. |
disabled | It is used for setting or returning whether a search field is disabled, or not. |
form | It is used for returning a reference to the form that contains the search field. |
list | It is used for returning a reference to the datalist that contains the search field. |
max | It is used for setting or returning the value of the max attribute of the search field. |
min | Sets or returns the value of the min attribute of the search field. |
name | It is used for setting or returning the value of the name attribute of a search field. |
readOnly | It is used for setting or returning whether the search field is read-only, or not. |
required | It is used for setting or returning whether the search field must be filled out before submitting a form. |
step | It is used for setting or returning the value of the step attribute of the search field. |
type | It is used for returning which type of form element the search field is. |
value | It 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
Recommended Posts:
- HTML | DOM Input URL Object
- HTML | DOM Input Search name Property
- HTML | <input type="search">
- HTML | DOM Input Search value Property
- HTML | DOM Input Text Object
- HTML | DOM Input Email Object
- HTML | DOM Input Week Object
- HTML | DOM Input Month Object
- HTML | DOM Input Color Object
- HTML | DOM Input Password Object
- HTML | DOM Input Number Object
- HTML | DOM Input Image Object
- HTML | DOM Input Button Object
- HTML | DOM Input FileUpload Object
- HTML | DOM Input Reset Object
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.