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 disabled Property
The HTML DOM Input Password disabled property is used for setting or returning whether the password field is disabled or not. It uses boolean values with true representing the element should be disabled and false otherwise. The disabled property is set to false by default. The disabled element is greyed out by default and is unclickable.
Syntax
Following is the syntax for setting the disabled property −
passwordObject.disabled = true|false;
Following is the syntax for getting the disabled property −
var isDisabled = passwordObject.disabled;
Here, true means the password field is disabled and false means the password field is not disabled. It is false by default.
Parameters
The disabled property accepts the following values −
-
true − The password field is disabled and cannot be interacted with.
-
false − The password field is enabled and can be interacted with (default value).
Return Value
The disabled property returns a boolean value indicating the current disabled state of the password field.
Example − Disabling a Password Field
Following example demonstrates how to disable a password field using the disabled property −
<!DOCTYPE html>
<html>
<head>
<title>Input Password disabled Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Input Password disabled Property</h2>
<p>Password: <input type="password" id="PASS" value="demo123" style="padding: 5px; margin-left: 10px;"></p>
<p>Disable the above password field by clicking on the DISABLE button</p>
<button type="button" onclick="disablePass()" style="padding: 8px 15px; margin: 5px;">DISABLE</button>
<p id="Sample" style="font-weight: bold; color: red;"></p>
<script>
function disablePass() {
document.getElementById("PASS").disabled = true;
document.getElementById("Sample").innerHTML = "The password field is now disabled";
}
</script>
</body>
</html>
The output shows a password field that becomes greyed out and unclickable when the DISABLE button is clicked −
Password: [password field with hidden text] Disable the above password field by clicking on the DISABLE button [DISABLE button] (After clicking DISABLE:) Password: [greyed out password field - disabled] The password field is now disabled
Example − Enabling and Disabling Password Field
Following example shows how to both enable and disable a password field dynamically −
<!DOCTYPE html>
<html>
<head>
<title>Toggle Password Field State</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Toggle Password Field State</h2>
<p>Enter Password: <input type="password" id="myPassword" placeholder="Enter password" style="padding: 5px; margin-left: 10px;"></p>
<button type="button" onclick="togglePassword()" style="padding: 8px 15px; margin: 5px;">Toggle State</button>
<button type="button" onclick="checkStatus()" style="padding: 8px 15px; margin: 5px;">Check Status</button>
<p id="status" style="font-weight: bold; color: blue;"></p>
<script>
function togglePassword() {
var passwordField = document.getElementById("myPassword");
passwordField.disabled = !passwordField.disabled;
document.getElementById("status").innerHTML =
passwordField.disabled ? "Password field is DISABLED" : "Password field is ENABLED";
}
function checkStatus() {
var isDisabled = document.getElementById("myPassword").disabled;
document.getElementById("status").innerHTML =
"Current status: " + (isDisabled ? "DISABLED" : "ENABLED");
}
</script>
</body>
</html>
This example allows you to toggle the password field between enabled and disabled states and check the current status −
Enter Password: [password input field] [Toggle State] [Check Status] (Status messages appear based on button clicks) Password field is DISABLED / Password field is ENABLED Current status: DISABLED / Current status: ENABLED
Example − Setting Disabled State on Page Load
Following example demonstrates setting the disabled property when the page loads −
<!DOCTYPE html>
<html>
<head>
<title>Password Field Disabled on Load</title>
</head>
<body onload="initializeForm()" style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Form with Initially Disabled Password</h2>
<form>
<p>Username: <input type="text" id="username" style="padding: 5px; margin-left: 10px;"></p>
<p>Password: <input type="password" id="password" style="padding: 5px; margin-left: 10px;"></p>
<button type="button" onclick="enablePassword()" style="padding: 8px 15px; margin: 5px;">Enable Password</button>
</form>
<p id="message" style="color: orange; font-weight: bold;"></p>
<script>
function initializeForm() {
document.getElementById("password").disabled = true;
document.getElementById("message").innerHTML = "Password field is disabled by default";
}
function enablePassword() {
document.getElementById("password").disabled = false;
document.getElementById("message").innerHTML = "Password field is now enabled";
}
</script>
</body>
</html>
The password field starts disabled when the page loads and can be enabled by clicking the button −
Username: [text input field] Password: [disabled password field - greyed out] [Enable Password] Password field is disabled by default (After clicking Enable Password:) Password field is now enabled
Key Points
Following are the important points about the Input Password disabled property −
-
The disabled property is a boolean attribute that prevents user interaction with the password field.
-
Disabled password fields appear greyed out and cannot receive focus or user input.
-
The disabled state can be changed dynamically using JavaScript.
-
Disabled form fields are not submitted when the form is sent to the server.
-
The property can be used to conditionally enable password fields based on user actions or form validation.
Conclusion
The HTML DOM Input Password disabled property provides control over the interactivity of password fields. By setting this property to true or false, developers can dynamically enable or disable password inputs based on application logic, improving user experience and form validation workflows.
228 Views
