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 URL defaultValue Property
The HTML DOM Input URL defaultValue property sets or returns the default value of a URL input field. The defaultValue represents the original value specified in the HTML value attribute and remains unchanged even when users modify the input field. This differs from the value property, which updates as the user types.
Syntax
Following is the syntax for returning the default value −
inputURLObject.defaultValue
Following is the syntax for setting the default value −
inputURLObject.defaultValue = 'string'
Parameters
The defaultValue property accepts a string value representing the default URL. This string should be a valid URL format (e.g., https://example.com) but the browser does not enforce URL validation on the defaultValue itself.
Return Value
The property returns a string representing the default value of the URL input field as originally specified in the HTML value attribute.
Example
Let us see an example of the Input URL defaultValue property −
<!DOCTYPE html>
<html>
<head>
<title>Input URL defaultValue</title>
<style>
form {
width: 70%;
margin: 0 auto;
text-align: center;
font-family: Arial, sans-serif;
}
input, button {
padding: 8px;
margin: 5px;
border-radius: 5px;
}
#URLSelect {
width: 300px;
}
#divDisplay {
margin-top: 15px;
padding: 10px;
background-color: #f0f0f0;
border-radius: 5px;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>URL defaultValue Property</legend>
<label for="URLSelect">Website URL:</label><br>
<input type="url" id="URLSelect" value="https://www.tutorialspoint.com"><br>
<button type="button" onclick="resetToDefault()">Reset to Default</button>
<button type="button" onclick="showValues()">Show Current vs Default</button>
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputURL = document.getElementById("URLSelect");
// Display initial default value
divDisplay.innerHTML = 'Default Value: ' + inputURL.defaultValue;
function resetToDefault() {
var currentValue = inputURL.value;
inputURL.value = inputURL.defaultValue;
divDisplay.innerHTML = 'Current value "' + currentValue + '" reset to default: "' + inputURL.defaultValue + '"';
}
function showValues() {
divDisplay.innerHTML = 'Current Value: "' + inputURL.value + '"<br>Default Value: "' + inputURL.defaultValue + '"';
}
</script>
</body>
</html>
The output initially displays the default value. Users can modify the URL field and use the buttons to compare current vs default values or reset to the original −
Default Value: https://www.tutorialspoint.com (After user changes URL and clicks "Show Current vs Default"): Current Value: "https://www.example.com" Default Value: "https://www.tutorialspoint.com" (After clicking "Reset to Default"): Current value "https://www.example.com" reset to default: "https://www.tutorialspoint.com"
Changing the Default Value
The defaultValue property can be modified programmatically, which updates the original default value reference.
Example
<!DOCTYPE html>
<html>
<head>
<title>Modifying Default Value</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>Change Default Value Example</h3>
<label for="websiteURL">Website:</label>
<input type="url" id="websiteURL" value="https://www.google.com" style="width: 250px; padding: 5px;"><br><br>
<button onclick="changeDefault()">Set New Default</button>
<button onclick="resetToDefault()">Reset to Default</button><br><br>
<div id="output" style="background: #f9f9f9; padding: 10px; border-radius: 5px;"></div>
<script>
var urlInput = document.getElementById("websiteURL");
var output = document.getElementById("output");
// Show initial default value
output.innerHTML = "Initial Default: " + urlInput.defaultValue;
function changeDefault() {
urlInput.defaultValue = "https://www.tutorialspoint.com";
output.innerHTML = "Default value changed to: " + urlInput.defaultValue;
}
function resetToDefault() {
urlInput.value = urlInput.defaultValue;
output.innerHTML = "Input reset to default: " + urlInput.defaultValue;
}
</script>
</body>
</html>
The example shows how to programmatically change the defaultValue and reset the input field to the new default −
Initial Default: https://www.google.com (After clicking "Set New Default"): Default value changed to: https://www.tutorialspoint.com
Key Points
The
defaultValueproperty reflects the original HTMLvalueattribute.Unlike the
valueproperty,defaultValuedoes not change when users type in the input field.Modifying
defaultValueprogrammatically changes the reference point for "default" but does not affect the current input value.This property is useful for reset functionality and comparing current vs original values.
The
defaultValueis inherited from the HTMLvalueattribute at page load time.
Conclusion
The defaultValue property provides access to the original value of a URL input field, remaining constant regardless of user input changes. It serves as a reliable reference point for implementing reset functionality and comparing current input against the original default value.
179 Views
