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 defaultValue Property
The HTML DOM Input Password defaultValue property sets or retrieves the default value of a password field. The defaultValue represents the original value specified in the HTML value attribute, while the value property reflects the current user input. The defaultValue remains constant even when users type in the field.
Syntax
Following is the syntax to set the defaultValue property −
passwordObject.defaultValue = value
Following is the syntax to get the defaultValue property −
var defaultVal = passwordObject.defaultValue
Parameters
The defaultValue property accepts the following parameter −
value − A string that specifies the default value for the password field.
Return Value
The property returns a string representing the default value of the password input field as originally specified in the HTML.
Example − Setting Default Value
Following example demonstrates how to change the defaultValue property of a password field −
<!DOCTYPE html>
<html>
<head>
<title>Input Password defaultValue Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Input Password defaultValue Property</h2>
<p>Password: <input type="password" id="PASS" value="abcd123"></p>
<p>Change the above password field default value by clicking the CHANGE button</p>
<button type="button" onclick="changeDefault()">CHANGE</button>
<button type="button" onclick="showDefault()">SHOW DEFAULT</button>
<p id="Sample"></p>
<script>
function changeDefault() {
document.getElementById("PASS").defaultValue = "Password1234";
var P = document.getElementById("PASS").defaultValue;
document.getElementById("Sample").innerHTML = "Default value changed to: " + P;
}
function showDefault() {
var defaultVal = document.getElementById("PASS").defaultValue;
document.getElementById("Sample").innerHTML = "Current default value: " + defaultVal;
}
</script>
</body>
</html>
In this example, clicking "CHANGE" sets a new default value, while "SHOW DEFAULT" displays the current default value. The default value changes from "abcd123" to "Password1234" when the CHANGE button is clicked.
Password: ??????? (password field showing dots) Change the above password field default value by clicking the CHANGE button [CHANGE] [SHOW DEFAULT] After clicking CHANGE: Default value changed to: Password1234
Example − Comparing Value vs DefaultValue
Following example shows the difference between value and defaultValue properties −
<!DOCTYPE html>
<html>
<head>
<title>Value vs DefaultValue</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Value vs DefaultValue Properties</h2>
<p>Password: <input type="password" id="myPassword" value="initial123"></p>
<p>Type something in the password field, then click the button below.</p>
<button type="button" onclick="compareValues()">Compare Values</button>
<button type="button" onclick="resetPassword()">Reset to Default</button>
<div id="result"></div>
<script>
function compareValues() {
var passwordField = document.getElementById("myPassword");
var currentValue = passwordField.value;
var defaultValue = passwordField.defaultValue;
document.getElementById("result").innerHTML =
"<p>Current value: " + currentValue + "</p>" +
"<p>Default value: " + defaultValue + "</p>";
}
function resetPassword() {
var passwordField = document.getElementById("myPassword");
passwordField.value = passwordField.defaultValue;
document.getElementById("result").innerHTML = "<p>Password reset to default value</p>";
}
</script>
</body>
</html>
This demonstrates that defaultValue remains "initial123" regardless of user input, while value changes as the user types. The reset button restores the field to its default value.
Password: ?????????? (password field) Type something in the password field, then click the button below. [Compare Values] [Reset to Default] After typing "newpass" and clicking Compare Values: Current value: newpass Default value: initial123
Key Points
The
defaultValueproperty stores the original value from the HTMLvalueattribute.Unlike the
valueproperty,defaultValuedoes not change when users type in the field.You can programmatically change
defaultValueusing JavaScript assignment.The
defaultValueproperty is useful for resetting forms or comparing against original values.Both properties return strings, even for password fields.
Browser Compatibility
The Input Password defaultValue property is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer. It has been part of the DOM specification since early versions of HTML.
Conclusion
The HTML DOM Input Password defaultValue property provides access to the original default value of a password field. Unlike the value property which changes with user input, defaultValue remains constant and serves as a reference point for form validation and reset operations.
374 Views
