Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM Input Password object
The HTML DOM Input Password object is associated with the <input> element with type “password”. We can create and access an input element with type password using the createElement() and getElementById() methods respectively.
Properties
Following are the properties for the password object −
| Sr.No | Property & Description |
|---|---|
| 1 | autocomplete To set or return the autocomplete attribute value of a password field |
| 2 | autofocus To set or return if the password field should automatically get focus when the page loads. |
| 3 | defaultValue To set or return the password field default value. |
| 4 | disabled To set or return whether the password field is disabled, or not. |
| 5 | form To return the reference of the form containing the password field |
| 6 | maxLength To set or return the maxlength attribute value of a password field. |
| 7 | name To or return the name attribute value of a password field |
| 8 | pattern To set or return pattern attribute value of a password field |
| 9 | placeholder To set or return the placeholder attribute value of a password field |
| 10 | readOnly To set or return if the password field is read-only, or not |
| 11 | required To set or return if it is mandatory to fill the password field before submitting the form or not. |
| 12 | size To set or return size attribute value of the password field. |
| 13 | type It is a read only property returning the type of form element the password field is. |
| 14 | value To set or returns the value attribute value of the password field. |
Methods
Following is the method for the password object −
| Sr.No | Method & Description |
|---|---|
| 1 | select() To select the password field contents. |
Syntax
Following is the syntax for −
Creating an input password object −
var P = document.createElement("INPUT");
P.setAttribute("type", "password");Let us look at an example for the Input Password object −
<!DOCTYPE html>
<html>
<head>
<script>
function createPASS() {
var P = document.createElement("INPUT");
P.setAttribute("type", "password");
document.body.appendChild(P);
}
</script>
</head>
<body>
<p>Create an input field with type password by clicking the below button</p>
<button onclick="createPASS()">CREATE</button>
<br><br>
PASSWORD:
</body>
</html>Output
This will produce the following output −
On clicking the CREATE button and typing in the newly created password field −
In the above example −
We have a button CREATE that will execute the createPass() method on being clicked by the user −
<button onclick="createPASS()">CREATE</button>
The createPass() method uses the createElement() method of the document object to create the <input> element by passing “INPUT” as a parameter. The newly created input element is assigned to variable P and using the setAttribute() method we create a type attribute with value password. Remember, setAttribute() creates the attribute and then assigns its value if the attribute doesn’t exist previously. Finally, using the appendChild() method on document body we append the input element with type password as the child of the body −
function createPASS() {
var P = document.createElement("INPUT");
P.setAttribute("type", "password");
document.body.appendChild(P);
}
171 Views
