Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
HTML DOM Input Search placeholder property
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 provides users with a hint about the expected input by displaying greyed-out text inside the search field. This text disappears when the user begins typing and is not submitted with the form data.
Syntax
Following is the syntax for setting the placeholder property −
searchObject.placeholder = text
Following is the syntax for getting the placeholder property −
var placeholderText = searchObject.placeholder
Here, text represents the placeholder text that provides a hint to the user about what to search for in the field.
Parameters
-
text − A string value that specifies the placeholder text to be displayed in the search field. This parameter is optional when getting the current placeholder value.
Return Value
When used as a getter, the property returns a string representing the current placeholder text of the search input field. When used as a setter, it does not return any value.
Setting Placeholder Property
Following example demonstrates how to set the placeholder text for a search input field −
<!DOCTYPE html>
<html>
<head>
<title>Search Placeholder Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>Search Placeholder Property</h1>
<form>
<label for="SEARCH1">FRUITS: </label>
<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 PLACEHOLDER</button>
<script>
function changeHolder() {
document.getElementById("SEARCH1").placeholder = "Search for fruits here...";
}
</script>
</body>
</html>
Initially, the search field appears without any placeholder text. After clicking the "CHANGE PLACEHOLDER" button, the field displays the hint text "Search for fruits here..." in grey.
Getting Placeholder Property
Following example shows how to retrieve the current placeholder text from a search input field −
<!DOCTYPE html>
<html>
<head>
<title>Get Placeholder Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>Get Placeholder Text</h1>
<form>
<label for="searchField">Products: </label>
<input type="search" id="searchField" placeholder="Enter product name..." name="products">
</form>
<br>
<button onclick="showPlaceholder()">SHOW PLACEHOLDER</button>
<p id="result"></p>
<script>
function showPlaceholder() {
var placeholder = document.getElementById("searchField").placeholder;
document.getElementById("result").innerHTML = "Current placeholder: " + placeholder;
}
</script>
</body>
</html>
This example retrieves and displays the current placeholder text when the button is clicked −
Current placeholder: Enter product name...
Dynamic Placeholder Updates
Following example demonstrates dynamically changing placeholder text based on user selection −
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Placeholder</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h1>Dynamic Search Placeholder</h1>
<p>Select a category to change the search placeholder:</p>
<select id="category" onchange="updatePlaceholder()">
<option value="">Select Category</option>
<option value="books">Books</option>
<option value="movies">Movies</option>
<option value="music">Music</option>
</select>
<br><br>
<input type="search" id="dynamicSearch" placeholder="Select a category first..." name="search">
<script>
function updatePlaceholder() {
var category = document.getElementById("category").value;
var searchField = document.getElementById("dynamicSearch");
switch(category) {
case "books":
searchField.placeholder = "Search for books by title or author...";
break;
case "movies":
searchField.placeholder = "Search for movies by title or genre...";
break;
case "music":
searchField.placeholder = "Search for songs or artists...";
break;
default:
searchField.placeholder = "Select a category first...";
}
}
</script>
</body>
</html>
The placeholder text changes contextually based on the selected category, providing specific guidance for each search type.
Key Points
-
The placeholder text appears in grey and disappears when the user starts typing.
-
Placeholder text is not submitted as form data, unlike the value property.
-
The property can be both read and written using JavaScript.
-
Placeholder text should provide helpful hints about the expected input format or content.
-
Setting an empty string (
"") removes the placeholder text entirely.
Browser Compatibility
The placeholder property for search input fields is supported by all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 10+. It provides consistent behavior across different platforms and devices.
Conclusion
The HTML DOM Input Search placeholder property is essential for creating user-friendly search interfaces. It allows developers to set contextual hints that guide users on what to search for, improving the overall user experience. The property can be dynamically updated using JavaScript to provide relevant guidance based on the current application state.
331 Views
