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 Color defaultValue Property
The HTML DOM Input Color defaultValue property sets or returns the default value of a color input field. This property represents the initial value specified in the HTML value attribute, which may differ from the current value if the user has changed the color selection.
Syntax
Following is the syntax for getting the default value −
inputColorObject.defaultValue
Following is the syntax for setting the default value −
inputColorObject.defaultValue = "colorValue"
Parameters
The defaultValue property accepts a string parameter representing a valid hexadecimal color value −
| Parameter | Description |
|---|---|
| colorValue | A string representing a hexadecimal color code in the format #RRGGBB, where values range from #000000 (black) to #FFFFFF (white) |
Return Value
The defaultValue property returns a string representing the default hexadecimal color value of the input color element.
Example − Getting Default Value
Following example demonstrates how to retrieve the default value of a color input −
<!DOCTYPE html>
<html>
<head>
<title>Input Color Default Value</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Color Input Default Value Demo</h2>
<form>
<label for="colorPicker">Choose a color: </label>
<input type="color" id="colorPicker" value="#ff6600">
</form>
<br>
<button onclick="getDefaultValue()">Get Default Value</button>
<button onclick="getCurrentValue()">Get Current Value</button>
<div id="result" style="margin-top: 15px; padding: 10px; background-color: #f0f0f0;"></div>
<script>
var colorInput = document.getElementById("colorPicker");
var result = document.getElementById("result");
function getDefaultValue() {
result.innerHTML = "<strong>Default Value:</strong> " + colorInput.defaultValue;
}
function getCurrentValue() {
result.innerHTML = "<strong>Current Value:</strong> " + colorInput.value;
}
</script>
</body>
</html>
The output shows the color picker with orange as the default color. Clicking "Get Default Value" displays #ff6600 regardless of user changes −
Default Value: #ff6600
Example − Setting Default Value
Following example shows how to programmatically set the default value of a color input −
<!DOCTYPE html>
<html>
<head>
<title>Setting Default Color Value</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Set Color Default Value</h2>
<form>
<label for="myColor">Color: </label>
<input type="color" id="myColor" value="#000000">
</form>
<br>
<button onclick="setRed()">Set Default to Red</button>
<button onclick="setBlue()">Set Default to Blue</button>
<button onclick="showDefault()">Show Default</button>
<div id="output" style="margin-top: 15px; padding: 10px; border: 1px solid #ccc;"></div>
<script>
var colorInput = document.getElementById("myColor");
var output = document.getElementById("output");
function setRed() {
colorInput.defaultValue = "#ff0000";
output.innerHTML = "Default value set to red (#ff0000)";
}
function setBlue() {
colorInput.defaultValue = "#0000ff";
output.innerHTML = "Default value set to blue (#0000ff)";
}
function showDefault() {
output.innerHTML = "Current default value: " + colorInput.defaultValue;
}
</script>
</body>
</html>
This example allows you to change the default value dynamically and observe the changes −
Default value set to red (#ff0000)
Difference Between defaultValue and value
The key difference between defaultValue and value properties is −
| defaultValue Property | value Property |
|---|---|
| Returns the original default value specified in HTML | Returns the current value selected by the user |
| Remains unchanged unless programmatically modified | Changes when user selects a different color |
| Used to reset the input to its original state | Used to get the currently selected color |
Example − Comparing defaultValue vs value
<!DOCTYPE html>
<html>
<head>
<title>defaultValue vs value Comparison</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Change the color to see the difference</h2>
<form>
<label for="colorDemo">Select color: </label>
<input type="color" id="colorDemo" value="#00ff00">
</form>
<br>
<button onclick="compareValues()">Compare Values</button>
<button onclick="resetToDefault()">Reset to Default</button>
<div id="comparison" style="margin-top: 15px; padding: 10px; background-color: #f9f9f9;"></div>
<script>
var colorInput = document.getElementById("colorDemo");
var comparison = document.getElementById("comparison");
function compareValues() {
comparison.innerHTML =
"<strong>Default Value:</strong> " + colorInput.defaultValue + "<br>" +
"<strong>Current Value:</strong> " + colorInput.value;
}
function resetToDefault() {
colorInput.value = colorInput.defaultValue;
comparison.innerHTML = "Color reset to default value: " + colorInput.defaultValue;
}
</script>
</body>
</html>
This example clearly shows how the default value remains constant while the current value changes with user interaction.
Conclusion
The defaultValue property is useful for preserving the original color value and implementing reset functionality. Unlike the value property, defaultValue maintains the initial state and can be used to restore the input to its original color when needed.
198 Views
