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 Email defaultValue Property
The HTML DOM Input Email defaultValue property sets or returns the default value of an email input field. This property corresponds to the value attribute in the HTML markup. Unlike the current value property which changes as the user types, the defaultValue remains constant and represents the original value specified in the HTML.
Syntax
Following is the syntax for returning the default value −
inputEmailObject.defaultValue
Following is the syntax for setting the default value −
inputEmailObject.defaultValue = "string"
Parameters
The defaultValue property accepts a string parameter that represents the default email address to be set for the input field.
Return Value
The property returns a string representing the default value of the email input field as specified in the HTML value attribute.
Example
Following example demonstrates the Input Email defaultValue property −
<!DOCTYPE html>
<html>
<head>
<title>Input Email defaultValue</title>
<style>
form {
width: 70%;
margin: 0 auto;
text-align: center;
font-family: Arial, sans-serif;
}
* {
padding: 4px;
margin: 5px;
}
input[type="button"] {
border-radius: 8px;
background-color: #4CAF50;
color: white;
border: none;
padding: 8px 16px;
cursor: pointer;
}
#divDisplay {
margin-top: 15px;
font-weight: bold;
color: #333;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>Email defaultValue Property</legend>
<label for="EmailSelect">User Email:
<input type="email" id="EmailSelect" value="user@example.com">
</label>
<input type="button" onclick="getDefaultValue()" value="Reset to Default">
<input type="button" onclick="showValues()" value="Show Current vs Default">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputEmail = document.getElementById("EmailSelect");
// Display initial default value
divDisplay.innerHTML = 'Default Value: ' + inputEmail.defaultValue;
function getDefaultValue() {
divDisplay.innerHTML = 'Current Value: ' + inputEmail.value +
'<br>Resetting to Default: ' + inputEmail.defaultValue;
inputEmail.value = inputEmail.defaultValue;
}
function showValues() {
divDisplay.innerHTML = 'Current Value: ' + inputEmail.value +
'<br>Default Value: ' + inputEmail.defaultValue;
}
</script>
</body>
</html>
The output displays the email input field with buttons to demonstrate the defaultValue property −
Email defaultValue Property User Email: user@example.com [Reset to Default] [Show Current vs Default] Default Value: user@example.com
How It Works
When a user types in the email input field, the value property changes to reflect the current content. However, the defaultValue property always retains the original value specified in the HTML value attribute. This makes it useful for reset functionality or form validation.
Example − Changing Default Value Programmatically
Following example shows how to change the default value using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>Changing defaultValue</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Email Input with Dynamic Default Value</h2>
<input type="email" id="emailInput" value="original@domain.com"><br><br>
<button onclick="changeDefault()">Change Default to admin@company.com</button>
<button onclick="resetToDefault()">Reset to Default</button>
<button onclick="showInfo()">Show Info</button>
<p id="info"></p>
<script>
var emailInput = document.getElementById("emailInput");
var info = document.getElementById("info");
function changeDefault() {
emailInput.defaultValue = "admin@company.com";
info.innerHTML = "Default value changed to: " + emailInput.defaultValue;
}
function resetToDefault() {
emailInput.value = emailInput.defaultValue;
info.innerHTML = "Input reset to default value: " + emailInput.defaultValue;
}
function showInfo() {
info.innerHTML = "Current Value: " + emailInput.value +
"<br>Default Value: " + emailInput.defaultValue;
}
</script>
</body>
</html>
This example demonstrates that the defaultValue can be changed programmatically, affecting future reset operations.
Key Points
The
defaultValueproperty reflects the HTMLvalueattribute, not the current user input.Changing the
defaultValuedoes not affect the current displayed value in the input field.The property is useful for implementing reset functionality in forms.
Both getting and setting the
defaultValuework with string values.If no
valueattribute is specified in HTML, thedefaultValuereturns an empty string.
Browser Compatibility
The Input Email defaultValue property is supported in all modern browsers that support HTML5 email input fields, including Chrome, Firefox, Safari, Edge, and Opera.
Conclusion
The HTML DOM Input Email defaultValue property provides access to the original value of an email input field as defined in the HTML markup. It remains constant regardless of user input changes, making it essential for form reset functionality and maintaining reference to the initial state of email input fields.
176 Views
