Open In App
Related Articles

HTML | DOM Input Password placeholder Property

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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
  • It is used to set the placeholder property.
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. 

HTML

<!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. 

HTML

<!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 1+
  • Edge 12+
  • Firefox 1+
  • Opera 2+
  • Safari 1+


Last Updated : 25 Aug, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads