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 value Property
The HTML DOM Input URL value property allows you to get or set the value of an HTML input element with type="url". This property returns the current URL string in the input field or sets it to a new URL value programmatically.
Syntax
Following is the syntax for getting the URL value −
inputURLObject.value
Following is the syntax for setting the URL value −
inputURLObject.value = "URL_string"
Parameters
The value property accepts the following parameter −
URL_string − A string representing a valid URL that will be set as the value of the input URL field.
Return Value
The property returns a string representing the current URL value in the input field. If no value is set, it returns an empty string.
Example − Getting and Setting URL Values
Following example demonstrates how to get and set URL values using buttons −
<!DOCTYPE html>
<html>
<head>
<title>Input URL value Property</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;
}
input[type="url"] {
width: 300px;
padding: 8px;
border: 2px solid #ddd;
border-radius: 4px;
}
#divDisplay {
margin-top: 15px;
font-weight: bold;
color: #333;
}
</style>
</head>
<body>
<form>
<fieldset>
<legend>URL Value Property Demo</legend>
<label for="URLSelect">Website URL:</label><br>
<input type="url" id="URLSelect" placeholder="Enter a URL"><br>
<input type="button" onclick="setURL('google')" value="Set Google">
<input type="button" onclick="setURL('bing')" value="Set Bing">
<input type="button" onclick="setURL('github')" value="Set GitHub"><br>
<input type="button" onclick="displayURL()" value="Show Current URL">
<input type="button" onclick="clearURL()" value="Clear URL">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputURL = document.getElementById("URLSelect");
function setURL(site) {
switch(site) {
case 'google':
inputURL.value = 'https://www.google.com';
break;
case 'bing':
inputURL.value = 'https://www.bing.com';
break;
case 'github':
inputURL.value = 'https://www.github.com';
break;
}
divDisplay.textContent = 'URL set to: ' + inputURL.value;
}
function displayURL() {
if(inputURL.value !== '') {
divDisplay.textContent = 'Current URL: ' + inputURL.value;
} else {
divDisplay.textContent = 'No URL entered';
}
}
function clearURL() {
inputURL.value = '';
divDisplay.textContent = 'URL field cleared';
}
</script>
</body>
</html>
The output shows a URL input field with buttons to set predefined URLs, display the current value, or clear the field −
Website URL: [Enter a URL input field] [Set Google] [Set Bing] [Set GitHub] [Show Current URL] [Clear URL] (Status message appears below buttons)
Example − URL Validation
Following example demonstrates URL validation using the value property −
<!DOCTYPE html>
<html>
<head>
<title>URL Validation Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>URL Validation Demo</h2>
<label for="urlInput">Enter Website URL:</label><br>
<input type="url" id="urlInput" placeholder="https://example.com" style="width: 300px; padding: 8px; margin: 10px 0;"><br>
<button onclick="validateURL()" style="padding: 8px 16px; background: #007cba; color: white; border: none; border-radius: 4px;">Validate URL</button>
<div id="result" style="margin-top: 15px; font-weight: bold;"></div>
<script>
function validateURL() {
var urlInput = document.getElementById("urlInput");
var result = document.getElementById("result");
var urlValue = urlInput.value;
if (urlValue === '') {
result.style.color = 'red';
result.textContent = 'Please enter a URL';
return;
}
// Basic URL pattern check
var urlPattern = /^https?:\/\/.+\..+/;
if (urlPattern.test(urlValue)) {
result.style.color = 'green';
result.textContent = 'Valid URL: ' + urlValue;
} else {
result.style.color = 'orange';
result.textContent = 'URL may be invalid: ' + urlValue;
}
}
</script>
</body>
</html>
This example validates the entered URL and displays appropriate feedback based on the URL format −
URL Validation Demo Enter Website URL: [https://example.com input field] [Validate URL] (Validation result appears below)
Key Points
The
valueproperty works with input elements oftype="url".Getting the value returns the current URL string or an empty string if no value is set.
Setting the value programmatically updates the input field immediately.
The browser provides built-in URL validation for input[type="url"] elements.
You can combine the value property with JavaScript validation for enhanced user experience.
Conclusion
The HTML DOM Input URL value property provides a simple way to get and set URL values in form inputs. It enables dynamic URL manipulation and validation, making it useful for creating interactive web forms that handle URL data effectively.
184 Views
