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 Text defaultValue Property
The HTML DOM Input Text defaultValue property is used for setting or getting the default value of a text field. The defaultValue of an element is the initial value assigned to the value attribute in HTML. The key difference between the value property and defaultValue property is that defaultValue retains the original default value specified in HTML, while the value property changes based on user input in the field.
Syntax
Following is the syntax to get the defaultValue property −
var defaultVal = textObject.defaultValue;
Following is the syntax to set the defaultValue property −
textObject.defaultValue = value;
Here, value is a string representing the default value for the text field.
Return Value
The defaultValue property returns a string that represents the default value of the text input field as originally specified in the HTML value attribute.
Example − Getting Default Value
Following example demonstrates how to get the default value of a text input field −
<!DOCTYPE html>
<html>
<head>
<title>Get Default Value</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Get Input Text Default Value</h2>
<p>Username: <input type="text" id="username" value="admin123"></p>
<p>Try typing in the field, then click the button to see the original default value.</p>
<button onclick="showDefault()">Show Default Value</button>
<button onclick="showCurrent()">Show Current Value</button>
<p id="result"></p>
<script>
function showDefault() {
var defaultVal = document.getElementById("username").defaultValue;
document.getElementById("result").innerHTML = "Default Value: " + defaultVal;
}
function showCurrent() {
var currentVal = document.getElementById("username").value;
document.getElementById("result").innerHTML = "Current Value: " + currentVal;
}
</script>
</body>
</html>
Even after typing in the input field, the defaultValue remains "admin123" while the value changes with user input −
Username: [admin123] (input field) Try typing in the field, then click the button to see the original default value. [Show Default Value] [Show Current Value] (Shows: Default Value: admin123 or Current Value: [whatever user typed])
Example − Setting Default Value
Following example shows how to change the default value of a text input field −
<!DOCTYPE html>
<html>
<head>
<title>Set Default Value</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Input Text defaultValue Property</h2>
<p>USERNAME: <input type="text" id="TEXT1" value="RON_1"></p>
<p>Change the above text field default value by clicking the CHANGE button.</p>
<button type="button" onclick="changeDefault()">CHANGE</button>
<button type="button" onclick="resetField()">RESET TO DEFAULT</button>
<p id="Sample"></p>
<script>
function changeDefault() {
document.getElementById("TEXT1").defaultValue = "ROHAN_2";
var newDefault = document.getElementById("TEXT1").defaultValue;
document.getElementById("Sample").innerHTML = "Default value has been changed from RON_1 to " + newDefault;
}
function resetField() {
var input = document.getElementById("TEXT1");
input.value = input.defaultValue;
document.getElementById("Sample").innerHTML = "Field reset to default value: " + input.defaultValue;
}
</script>
</body>
</html>
The output shows how the default value can be modified and the field can be reset to its default state −
USERNAME: [RON_1] (input field) Change the above text field default value by clicking the CHANGE button. [CHANGE] [RESET TO DEFAULT] (After clicking CHANGE: "Default value has been changed from RON_1 to ROHAN_2")
Example − Form Reset Behavior
Following example demonstrates how the defaultValue property affects form reset behavior −
<!DOCTYPE html>
<html>
<head>
<title>Form Reset with defaultValue</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Form Reset Behavior</h2>
<form id="myForm">
<p>Email: <input type="email" id="email" value="user@example.com"></p>
<p>Name: <input type="text" id="name" value="John Doe"></p>
<button type="button" onclick="updateDefault()">Update Default Values</button>
<button type="reset">Reset Form</button>
</form>
<p id="info"></p>
<script>
function updateDefault() {
document.getElementById("email").defaultValue = "newuser@test.com";
document.getElementById("name").defaultValue = "Jane Smith";
document.getElementById("info").innerHTML = "Default values updated. Now type something and click Reset Form.";
}
</script>
</body>
</html>
When a form is reset, all input fields return to their defaultValue, not their original HTML value if the defaultValue has been programmatically changed.
Key Points
-
The
defaultValueproperty represents the original value specified in the HTMLvalueattribute. -
Unlike the
valueproperty,defaultValuedoes not change when users type in the input field. -
When a form is reset, input fields return to their
defaultValue, not necessarily their original HTML value. -
The
defaultValueproperty can be both read and modified programmatically using JavaScript. -
Changing
defaultValuedoes not immediately change the displayed field content unless you also set thevalueproperty.
Browser Compatibility
The defaultValue property is supported in all major browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer. It has been part of the DOM specification since early versions and provides consistent behavior across browsers.
Conclusion
The HTML DOM Input Text defaultValue property provides a way to access and modify the original default value of text input fields. It differs from the value property by maintaining the initial value regardless of user input, making it useful for form resets and tracking original field states in web applications.
579 Views
