HTML | DOM Input Search placeholder Property
The DOM Input Search placeholder Property in HTML DOM is used to set or return the value of the placeholder attribute of a search field. The placeholder attribute specifies the short hint that describes the expected value of an input field. The short hint is displayed in the field before the user enters a value.
Syntax:
- It returns the placeholder property.
searchObject.placeholder
- It is used to set the placeholder property.
searchObject.placeholder = text
Property Value: It contains single value text which is used to define a short hint that describes an expected value of the search Field.
Return Value: It returns a string value that represented a short hint that describes the expected value of the search Field.
Example-1: This example illustrates how to return Input search Placeholder property.
HTML
<!DOCTYPE html> < html > < head > < title > Input Search placeholder Property </ title > < style > h1 { color: green; } h2 { font-family: Impact; } body { text-align: center; } </ style > </ head > < body > < h1 >w3wiki</ h1 > < h2 >Input Search placeholder Property</ h2 > < form id = "myBeginner" > < input type = "Search" id = "test" placeholder = "Type to search.." readOnly> </ form > < br > < br > < button ondblclick = "Access()" > click here </ button > < p id = "check" style="font-size:24px; color:green;"> </ p > < script > function Access() { // return Input search placeholder property var s = document.getElementById( "test").placeholder; document.getElementById( "check").innerHTML = s; } </ script > </ body > </ html > |
Output:
Before Clicking On Button:
After Clicking On Button:
Example-2: This Example illustrates that how to set the Input search Placeholder Property.
HTML
<!DOCTYPE html> < html > < head > < title > Input Search placeholder Property </ title > < style > h1 { color: green; } h2 { font-family: Impact; } body { text-align: center; } </ style > </ head > < body > < h1 >w3wiki</ h1 > < h2 >Input Search placeholder Property</ h2 > < form id = "myBeginner" > < input type = "Search" id = "test" placeholder = "Type to search.." readOnly> </ form > < br > < br > < button ondblclick = "Access()" > click here </ button > < p id = "check" style="font-size:24px; color:green;"> </ p > < script > function Access() { // setting the Input search placeholder property var s = document.getElementById( "test").placeholder = "search here"; document.getElementById( "check").innerHTML = "The value of the Placeholder attribute was changed to " + s; } </ script > </ body > </ html > |
Output:
Before Clicking On Button:
After Clicking On Button:
Supported Browsers: The browser supported by DOM input search placeholder Property are listed below:
- Google Chrome 5 and above
- Edge 12 and above
- Firefox 4 and above
- Opera 10.6 and above
- Safari 5 and above