HTML DOM Input URL defaultValue Property

HTMLWeb DevelopmentFront End Technology

The HTML DOM Input URL defaultValue property sets/returns the default value corresponding to URL Input. The value attribute changes as the user types in the URL input but default value does not change.

Syntax

Following is the syntax −

  • Returning string value
inputURLObject.defaultValue
  • Setting defaultValue to string
inputURLObject.defaultValue = ‘string’

Example

Let us see an example of Input URL defaultValue property −

 Live Demo

<!DOCTYPE html>
<html>
<head>
<title>Input URL defaultValue</title>
<style>
   form {
      width:70%;
      margin: 0 auto;
      text-align: center;
   }
   * {
      padding: 2px;
      margin:5px;
   }
   input[type="button"] {
      border-radius: 10px;
   }
</style>
</head>
<body>
<form>
<fieldset>
<legend>URL-defaultValue</legend>
<label for="URLSelect">URL :
<input type="url" id="URLSelect" size="25" value="https://www.google.com">
</label>
<input type="button" onclick="getDefaultValue()" value="Reset Default Value">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
   var divDisplay = document.getElementById("divDisplay");
   var inputURL = document.getElementById("URLSelect");
   divDisplay.textContent = 'defaultValue: '+inputURL.defaultValue;
   function getDefaultValue() {
      var currentValue = inputURL.value;
      divDisplay.textContent = 'Value - '+inputURL.value+' resets to - '+inputURL.defaultValue;
      inputURL.value = inputURL.defaultValue;
   }
</script>
</body>
</html>

Output

This will produce the following output −

Before clicking ‘Reset Default Value’ button −

After clicking ‘Reset Default Value’ button with changed URL −

raja
Published on 26-Jul-2019 12:01:30
Advertisements