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 Search defaultValue Property
The HTML DOM Input Search defaultValue property is used for setting or getting the default value of a search field. The defaultValue of an element is the original value assigned to the value attribute when the page loads. The key difference between value and defaultValue properties is that defaultValue retains the original default value while value changes based on user input in the search field.
Syntax
Following is the syntax to get the defaultValue property −
searchObject.defaultValue
Following is the syntax to set the defaultValue property −
searchObject.defaultValue = value
Parameters
-
value − A string that specifies the default value for the search input field.
Return Value
Returns a string representing the default value of the search input field.
Example − Setting defaultValue Property
Let us look at an example that demonstrates how to change the defaultValue property of a search field −
<!DOCTYPE html>
<html>
<head>
<title>Input Search defaultValue Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 15px;">
<h1>Input Search defaultValue Property</h1>
<form>
FRUITS: <input type="search" id="SEARCH1" name="fruits" value="MANGO" style="padding: 5px; margin: 5px;">
</form>
<p>Change the above search field default value by clicking on the CHANGE button</p>
<button type="button" onclick="changeDefault()" style="padding: 8px 15px; margin: 5px; background: #007bff; color: white; border: none; cursor: pointer;">CHANGE</button>
<p id="Sample" style="margin-top: 10px; font-weight: bold; color: #333;"></p>
<script>
function changeDefault() {
document.getElementById("SEARCH1").defaultValue="APPLE";
var P = document.getElementById("SEARCH1").defaultValue;
document.getElementById("Sample").innerHTML = "Default value has been changed from MANGO to " + P;
}
</script>
</body>
</html>
The output of the above code is −
Input Search defaultValue Property FRUITS: [MANGO ] (search input field) Change the above search field default value by clicking on the CHANGE button [CHANGE] (button) (After clicking CHANGE button): Default value has been changed from MANGO to APPLE
Example − Getting defaultValue vs value
Following example demonstrates the difference between defaultValue and value properties −
<!DOCTYPE html>
<html>
<head>
<title>defaultValue vs value Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 15px;">
<h2>defaultValue vs value Property</h2>
<p>Enter some text in the search field and click the button to see the difference:</p>
<form>
Search: <input type="search" id="mySearch" value="JavaScript" style="padding: 5px; margin: 5px;">
</form>
<button onclick="showDifference()" style="padding: 8px 15px; margin: 5px; background: #28a745; color: white; border: none; cursor: pointer;">Show Difference</button>
<p id="result" style="margin-top: 10px; background: #f8f9fa; padding: 10px; border-left: 4px solid #007bff;"></p>
<script>
function showDifference() {
var searchField = document.getElementById("mySearch");
var currentValue = searchField.value;
var defaultValue = searchField.defaultValue;
document.getElementById("result").innerHTML =
"Current value (what user typed): " + currentValue + "<br>" +
"Default value (original): " + defaultValue;
}
</script>
</body>
</html>
When you modify the search field content and click the button, you can see that value reflects the current input while defaultValue remains unchanged −
defaultValue vs value Property Enter some text in the search field and click the button to see the difference: Search: [HTML Tutorial ] (modified by user) [Show Difference] (button) Current value (what user typed): HTML Tutorial Default value (original): JavaScript
Example − Resetting to Default Value
Following example shows how to reset a search field to its default value −
<!DOCTYPE html>
<html>
<head>
<title>Reset to Default Value</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 15px;">
<h2>Reset Search Field to Default Value</h2>
<form>
Product Search: <input type="search" id="productSearch" value="Laptop" placeholder="Enter product name" style="padding: 8px; margin: 5px; width: 200px;">
</form>
<button onclick="resetToDefault()" style="padding: 8px 15px; margin: 5px; background: #dc3545; color: white; border: none; cursor: pointer;">Reset to Default</button>
<p id="message" style="margin-top: 10px; color: #666;"></p>
<script>
function resetToDefault() {
var searchField = document.getElementById("productSearch");
searchField.value = searchField.defaultValue;
document.getElementById("message").innerHTML = "Search field reset to default value: " + searchField.defaultValue;
}
</script>
</body>
</html>
This example resets the search field to its original default value when the button is clicked −
Reset Search Field to Default Value Product Search: [Laptop ] [Reset to Default] (button) (After clicking reset): Search field reset to default value: Laptop
Key Points
-
The
defaultValueproperty reflects the original value specified in the HTMLvalueattribute. -
Unlike the
valueproperty,defaultValuedoes not change when users type in the search field. -
You can programmatically change the
defaultValueproperty using JavaScript. -
The
defaultValueproperty is useful for form validation and reset functionality. -
Both properties return string values, even if the original value was a number.
Browser Compatibility
The defaultValue property is supported in all major browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer. It works consistently across desktop and mobile platforms.
Conclusion
The HTML DOM Input Search defaultValue property provides access to the original default value of a search input field. It remains constant regardless of user input, making it useful for form resets, validation, and tracking the original state of form elements. Understanding the difference between value and defaultValue is essential for effective form handling in JavaScript.
199 Views
