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 Password placeholder property
The HTML DOM Input Password placeholder property is used for setting or returning the placeholder attribute value of a password input field. The placeholder provides a hint to users about what kind of input is expected, displaying greyed-out text inside the 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 −
passwordObject.placeholder = text
Following is the syntax for getting the placeholder property −
var placeholderText = passwordObject.placeholder
Parameters
text − A string that specifies the placeholder text to display as a hint in the password field.
Return Value
Returns a string representing the current placeholder text of the password input field.
Setting Placeholder Property
Following example demonstrates how to set the placeholder property of a password input field −
<!DOCTYPE html>
<html>
<head>
<title>Password Placeholder Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Password Placeholder Property</h2>
<label for="PASS1">Password:</label>
<input type="password" id="PASS1" placeholder="....">
<br><br>
<p>Change the placeholder text by clicking the button below:</p>
<button onclick="changeHolder()">CHANGE PLACEHOLDER</button>
<script>
function changeHolder() {
document.getElementById("PASS1").placeholder = "Enter your password here...";
}
</script>
</body>
</html>
Initially, the password field shows "...." as placeholder text. When the button is clicked, it changes to "Enter your password here..." −
Password: [....] (greyed placeholder text) After clicking button: Password: [Enter your password here...] (updated placeholder text)
Getting Placeholder Property
Following example shows how to retrieve the current placeholder value of a password field −
<!DOCTYPE html>
<html>
<head>
<title>Get Password Placeholder</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Get Placeholder Text</h2>
<label for="userPassword">Password:</label>
<input type="password" id="userPassword" placeholder="Minimum 8 characters">
<br><br>
<button onclick="showPlaceholder()">Show Current Placeholder</button>
<p id="output"></p>
<script>
function showPlaceholder() {
var passwordField = document.getElementById("userPassword");
var currentPlaceholder = passwordField.placeholder;
document.getElementById("output").innerHTML = "Current placeholder: " + currentPlaceholder;
}
</script>
</body>
</html>
When the button is clicked, it displays the current placeholder text below −
Current placeholder: Minimum 8 characters
Multiple Password Fields Example
Following example demonstrates managing placeholder text for multiple password fields −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Password Placeholders</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Registration Form</h2>
<form>
<label for="newPassword">New Password:</label><br>
<input type="password" id="newPassword" placeholder="Enter new password"><br><br>
<label for="confirmPassword">Confirm Password:</label><br>
<input type="password" id="confirmPassword" placeholder="Confirm your password"><br><br>
<button type="button" onclick="updatePlaceholders()">Update Placeholders</button>
<button type="button" onclick="clearPlaceholders()">Clear Placeholders</button>
</form>
<script>
function updatePlaceholders() {
document.getElementById("newPassword").placeholder = "8+ characters required";
document.getElementById("confirmPassword").placeholder = "Must match above password";
}
function clearPlaceholders() {
document.getElementById("newPassword").placeholder = "";
document.getElementById("confirmPassword").placeholder = "";
}
</script>
</body>
</html>
This example shows how to dynamically update placeholder text for multiple password fields, providing different hints based on user interaction.
Key Points
The placeholder property accepts and returns string values only.
Placeholder text is displayed in a lighter color and disappears when the user begins typing.
Setting an empty string (
"") removes the placeholder text entirely.The placeholder does not affect the actual value of the input field.
Placeholder text is not submitted with form data, unlike the value property.
This property is supported in all modern browsers that support HTML5.
Conclusion
The HTML DOM Input Password placeholder property provides an easy way to set or retrieve hint text for password fields. It enhances user experience by providing guidance about expected input format, and can be dynamically modified using JavaScript to respond to user interactions or form validation requirements.
468 Views
