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 type property
The HTML DOM Input password type property is associated with input elements that have type="password". This property returns the string "password" when accessed on a password input field. It is a read-only property that identifies the input type.
Syntax
Following is the syntax for accessing the password type property −
passwordObject.type
Return Value
The type property returns a string value "password" for input elements with type="password".
Example − Getting Input Type
Following example demonstrates how to retrieve the type of a password input field −
<!DOCTYPE html>
<html>
<head>
<title>Password Type Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Password Type Property Example</h2>
<label for="PASS1">PASSWORD: </label>
<input type="password" id="PASS1" placeholder="Enter password">
<p>Click the button below to get the input field type:</p>
<button onclick="getType()">Get Type</button>
<p id="Sample" style="color: blue; font-weight: bold;"></p>
<script>
function getType() {
var t = document.getElementById("PASS1").type;
document.getElementById("Sample").innerHTML = "The type for the input field is: " + t;
}
</script>
</body>
</html>
The output shows a password input field with a button. Clicking the button displays the input type −
Password Type Property Example PASSWORD: [????????????] (password field with dots) Click the button below to get the input field type: [Get Type] (After clicking button:) The type for the input field is: password
Example − Multiple Input Types Comparison
Following example demonstrates how different input types return their respective type values −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Input Types</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Compare Input Types</h2>
<div style="margin-bottom: 10px;">
<label>Text: </label>
<input type="text" id="textInput" placeholder="Text input">
</div>
<div style="margin-bottom: 10px;">
<label>Password: </label>
<input type="password" id="passwordInput" placeholder="Password input">
</div>
<div style="margin-bottom: 10px;">
<label>Email: </label>
<input type="email" id="emailInput" placeholder="Email input">
</div>
<button onclick="showAllTypes()">Show All Types</button>
<div id="results" style="margin-top: 15px; background: #f5f5f5; padding: 10px; border-radius: 5px;"></div>
<script>
function showAllTypes() {
var textType = document.getElementById("textInput").type;
var passwordType = document.getElementById("passwordInput").type;
var emailType = document.getElementById("emailInput").type;
var output = "<h3>Input Types:</h3>";
output += "<p><strong>Text input type:</strong> " + textType + "</p>";
output += "<p><strong>Password input type:</strong> " + passwordType + "</p>";
output += "<p><strong>Email input type:</strong> " + emailType + "</p>";
document.getElementById("results").innerHTML = output;
}
</script>
</body>
</html>
The output displays multiple input fields and shows their respective type values when the button is clicked −
Compare Input Types Text: [____________] (text input field) Password: [????????????] (password input field) Email: [____________] (email input field) [Show All Types] Input Types: Text input type: text Password input type: password Email input type: email
How It Works
The password type property works as follows −
-
DOM Access − Use
document.getElementById()to get the password input element. -
Type Property − Access the
typeproperty of the element to retrieve its input type. -
Return Value − The property returns the string
"password"for password input fields. -
Read-Only − This property is read-only and cannot be used to change the input type dynamically.
Common Use Cases
The password type property is commonly used in the following scenarios −
-
Form Validation − Checking if an input field is of password type before applying specific validation rules.
-
Dynamic Form Processing − Identifying different input types when processing forms with mixed input elements.
-
Security Implementations − Ensuring certain security measures are applied only to password fields.
-
UI Enhancement − Adding show/hide password functionality specifically to password input fields.
Conclusion
The HTML DOM Input password type property is a simple yet essential property that returns "password" for password input elements. It is primarily used for form validation, dynamic processing, and ensuring appropriate handling of sensitive input fields. This read-only property helps identify password inputs programmatically for enhanced security and user experience implementations.
195 Views
