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 Text placeholder property
The HTML DOM Input Text placeholder property is used for setting or returning the placeholder attribute value of an input text field. The placeholder property provides a hint to users about the expected input by displaying greyed-out text inside the input field before any user input. Unlike the value property, placeholder text is not submitted with the form data.
Syntax
Following is the syntax for setting the placeholder property −
textObject.placeholder = "text"
Following is the syntax for getting the placeholder property −
var placeholderText = textObject.placeholder
Here, text represents the placeholder text that provides a hint to the user about the expected input format or content.
Setting Placeholder Property
You can dynamically change the placeholder text of an input field using JavaScript. This is useful for providing different hints based on user interactions or form states.
Example
Following example demonstrates how to change the placeholder text dynamically −
<!DOCTYPE html>
<html>
<head>
<title>Input Text Placeholder Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Input Text Placeholder Property</h2>
<p>USERNAME: <input type="text" id="USR" placeholder="Enter username" style="padding: 8px; width: 200px;"></p>
<p>Change the placeholder text by clicking the button below:</p>
<button onclick="changeHolder()" style="padding: 8px 15px; background-color: #4CAF50; color: white; border: none; cursor: pointer;">CHANGE PLACEHOLDER</button>
<script>
function changeHolder() {
document.getElementById("USR").placeholder = "Enter your username here...";
}
</script>
</body>
</html>
Initially, the input field shows "Enter username" as placeholder text. After clicking the button, it changes to "Enter your username here..." −
Before click: [Enter username] (greyed placeholder text) After click: [Enter your username here...] (greyed placeholder text)
Getting Placeholder Property
You can retrieve the current placeholder value of an input field to check or manipulate it based on certain conditions.
Example
Following example shows how to get and display the current placeholder text −
<!DOCTYPE html>
<html>
<head>
<title>Get Placeholder Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Get Placeholder Text</h2>
<p>EMAIL: <input type="email" id="email" placeholder="user@example.com" style="padding: 8px; width: 200px;"></p>
<button onclick="showPlaceholder()" style="padding: 8px 15px; background-color: #2196F3; color: white; border: none; cursor: pointer;">GET PLACEHOLDER</button>
<p id="result"></p>
<script>
function showPlaceholder() {
var placeholder = document.getElementById("email").placeholder;
document.getElementById("result").innerHTML = "Current placeholder: " + placeholder;
}
</script>
</body>
</html>
Clicking the button displays the current placeholder text below the input field −
Current placeholder: user@example.com
Placeholder with Form Validation
Placeholder text can be dynamically updated to provide feedback during form validation, helping users understand input requirements.
Example
Following example demonstrates changing placeholder text based on input validation −
<!DOCTYPE html>
<html>
<head>
<title>Placeholder with Validation</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Password Validation</h2>
<p>PASSWORD: <input type="password" id="pwd" placeholder="Enter password" style="padding: 8px; width: 200px;" onblur="validatePassword()"></p>
<p id="message"></p>
<script>
function validatePassword() {
var passwordField = document.getElementById("pwd");
var password = passwordField.value;
if (password.length < 8) {
passwordField.placeholder = "Password must be at least 8 characters";
document.getElementById("message").innerHTML = "<span style='color: red;'>Password too short!</span>";
} else {
passwordField.placeholder = "Password accepted";
document.getElementById("message").innerHTML = "<span style='color: green;'>Password valid!</span>";
}
}
</script>
</body>
</html>
When the user enters a password shorter than 8 characters and moves away from the field, the placeholder updates to show the requirement.
Key Points
The placeholder text appears in light grey and disappears when the user starts typing.
Placeholder values are not submitted with form data, unlike the
valueproperty.You can dynamically change placeholder text using JavaScript for better user experience.
Placeholder text should provide helpful hints about the expected input format or content.
The property works with various input types including text, email, password, and search fields.
Browser Compatibility
The placeholder property is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 10+. For older browsers, consider using JavaScript polyfills or alternative labeling methods.
Conclusion
The HTML DOM Input Text placeholder property provides an effective way to guide users by displaying hint text within input fields. It can be dynamically modified using JavaScript to provide contextual feedback and improve form usability. Remember that placeholder text is purely visual and not part of the form data submitted to the server.
405 Views
