The HTML DOM Input Search placeholder property is used for setting or returning the placeholder attribute value of an input search field. The placeholder property is used for giving the web page users a hint about the input element by showing a text inside the input field before the user inputs anything. The placeholder text is greyed by default and isn’t submitted to the form unlike the value property.
Syntax
Following is the syntax for −
Setting the placeholder property −
searchObject.placeholder = text
Here, text represents the placeholder text specifying the hint for the user about the search field.
Example
Let us look at an example for the input search placeholder property −
<!DOCTYPE html>
<html>
<body>
<h1>earch placeholder property</h1>
<form>
FRUITS: <input type="search" id="SEARCH1" name="fruits">
</form>
<p>Change the placeholder text of the above field by clicking the below button</p>
<button onclick="changeHolder()">CHANGE</button>
<script>
function changeHolder() {
document.getElementById("SEARCH1").placeholder = "Search for the fruits here..";
}
</script>
</body>
</html>Output
This will produce the following output −
On clicking the CHANGE button −
