HTML | DOM Input Password placeholder Property - GeeksforGeeks

08 Mar, 2019
The DOM Input Password Placeholder Property is used to set or return the value of the Placeholder attribute of a Password Field. The placeholder attribute specifies a 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 is used to return the placeholder property.passwordObject.placeholder
passwordObject.placeholder
It is used to set the placeholder property.passwordObject.placeholder = text
passwordObject.placeholder = text
Property Value:
text: It defines a short hint that describe a expected value of the Password Field.
Return Value: It returns a String value which represented a short hint that describes the expected value of the Password Field.
Example-1: This Example illustrates how to return the property.
<!DOCTYPE html> <html>   <body style="text-align:center;">       <h1 style="color:green;">             GeeksForGeeks         </h1>       <h2>DOM Input Password placeholder Property</h2>       <form id="myGeeks">    Password: <input type="password"        id="myPsw"        name="Geeks"        placeholder="password">        </form>    <br><br>    <button onclick="myFunction()">     Click Here! </button>       <p id="demo" style="color:green;font-size:25px;"></p>       <script>         function myFunction() {             var x =             document.getElementById(             "myPsw").placeholder;                          document.getElementById(             "demo").innerHTML = x;        }     </script>   </body>   </html>                    
Output:
Before clicking on the button:After clicking on the button:
Example-2: This example illustrates that how to set the property.
<!DOCTYPE html> <html>   <body style="text-align:center;">       <h1 style="color:green;">             GeeksForGeeks         </h1>       <h2>DOM Input Password placeholder Property</h2>       <form id="myGeeks">    Password: <input type="password"        id="myPsw"        name="Geeks"        placeholder="password">        </form>    <br><br>    <button onclick="myFunction()">     Click Here! </button>       <p id="demo" style="color:green;font-size:25px;"></p>       <script>         function myFunction() {             var x =             document.getElementById(             "myPsw").placeholder ="Enter Your Password";                          document.getElementById(             "demo").innerHTML = x;        }     </script>   </body>   </html>                    
Output:Before clicking on the button:After clicking on the button:
Supported Browsers: The browser supported by DOM input Password placeholder Property are listed below:
Google Chrome
Internet Explorer
Firefox
Opera
Safari
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
HTML-DOM
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
REST API (Introduction)
HTML Cheat Sheet - A Basic Guide to HTML
Design a web page using HTML and CSS
Form validation using jQuery
Angular File Upload
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript