Teach with us

HTML DOM Input Password placeholder property

The HTML DOM Input Password placeholder property is used for setting or returning the placeholder attribute value of an input password field. The placeholder property is used for giving the web page users a hint about the input element by showing a text inside the input field befor the user inputs anything. The placeholder text is greyed by default and isn’t submitted to the form unlike the value property.

Syntax

Following is the syntax for −

Setting the placeholder property −

passwordObject.placeholder = text

Here, text represents the placeholder text specifying the hint for the user about the password field.

Example

Let us look at an example for the input Password placeholder property −

<!DOCTYPE html>
<html>
<body>
<h1>password placeholder property</h1>
Password: <input type="password" id="PASS1" placeholder="....">
<p>Change the placeholder text of the above field by clicking the below button</p>
<button onclick="changeHolder()">CHANGE</button>
<script>
   function changeHolder() {
      document.getElementById("PASS1").placeholder = "Enter your password here..";
   }
</script>
</body>
</html>

Output

This will produce the following output −

On clicking the CHANGE button −

In the above example −

We have first created an input password field with id “PASS1” and placeholder attribute value set to “….”.

Password: <input type="password" id="PASS1" placeholder="....">

We then created a button CHANGE that will execute the changeHolder() method when clicked by the user −

<button onclick="changeHolder()">CHANGE</button>

The changeHolder()uses the getElementById() method to get the input element with type password. It then set its placeholder property value to “Enter your password here..” which is reflected in the password field −

function changeHolder() {
   document.getElementById("PASS1").placeholder = "Enter your password here..";
}
Updated on 22-Aug-2019 08:37:42

0 Views

Tutorials Point

Previous Page Next Page  
Advertisements