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 name Property
The HTML DOM Input URL name property gets or sets the value of the name attribute of an HTML input element with type="url". This property is essential for identifying form data when submitted to the server and for accessing the element via JavaScript.
Syntax
Following is the syntax for returning the name value −
inputURLObject.name
Following is the syntax for setting the name to a new value −
inputURLObject.name = 'string'
Return Value
The property returns a string representing the value of the name attribute of the input URL element. If no name attribute is specified, it returns an empty string.
Example − Getting URL Name Property
Following example demonstrates how to get the name property of an input URL element −
<!DOCTYPE html>
<html>
<head>
<title>Input URL name Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<form>
<fieldset style="padding: 20px;">
<legend>URL Input Example</legend>
<label for="URLSelect">Employee URL:</label>
<input type="url" id="URLSelect" value="https://www.example.com" name="employeeURL">
<br><br>
<input type="button" onclick="getName()" value="Get Name Property">
<div id="divDisplay" style="margin-top: 10px; font-weight: bold;"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var inputURL = document.getElementById("URLSelect");
function getName() {
divDisplay.textContent = 'Name property value: ' + inputURL.name;
}
</script>
</body>
</html>
The output shows the name property value when the button is clicked −
Name property value: employeeURL
Example − Setting URL Name Property
Following example shows how to dynamically change the name property using JavaScript −
<!DOCTYPE html>
<html>
<head>
<title>Setting URL Name Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<form>
<fieldset style="padding: 20px;">
<legend>Dynamic Name Change</legend>
<label for="urlInput">Website URL:</label>
<input type="url" id="urlInput" name="oldName" value="https://www.tutorialspoint.com">
<br><br>
<button type="button" onclick="changeName()">Change Name</button>
<button type="button" onclick="showName()">Show Current Name</button>
<div id="result" style="margin-top: 10px; padding: 10px; background: #f0f0f0;"></div>
</fieldset>
</form>
<script>
var urlInput = document.getElementById("urlInput");
var result = document.getElementById("result");
function changeName() {
urlInput.name = "websiteURL";
result.innerHTML = "Name changed from 'oldName' to '" + urlInput.name + "'";
}
function showName() {
result.innerHTML = "Current name: " + urlInput.name;
}
</script>
</body>
</html>
Initially, the name is "oldName". After clicking "Change Name", it becomes "websiteURL" −
Current name: oldName (After clicking "Change Name") Name changed from 'oldName' to 'websiteURL'
Example − Form Submission with Name Property
Following example demonstrates how the name property is used during form submission −
<!DOCTYPE html>
<html>
<head>
<title>URL Name in Form Submission</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<form onsubmit="return false;">
<fieldset style="padding: 20px;">
<legend>User Profile URLs</legend>
<label for="linkedinURL">LinkedIn Profile:</label>
<input type="url" id="linkedinURL" name="linkedin_profile" value="https://linkedin.com/in/johndoe">
<br><br>
<label for="githubURL">GitHub Profile:</label>
<input type="url" id="githubURL" name="github_profile" value="https://github.com/johndoe">
<br><br>
<button type="button" onclick="showFormData()">Show Form Data</button>
<div id="formData" style="margin-top: 10px; padding: 10px; background: #e8f4fd;"></div>
</fieldset>
</form>
<script>
function showFormData() {
var linkedin = document.getElementById("linkedinURL");
var github = document.getElementById("githubURL");
var formData = document.getElementById("formData");
formData.innerHTML =
"<b>Form Data:</b><br>" +
linkedin.name + " = " + linkedin.value + "<br>" +
github.name + " = " + github.value;
}
</script>
</body>
</html>
The form data shows how name properties identify each URL input −
Form Data: linkedin_profile = https://linkedin.com/in/johndoe github_profile = https://github.com/johndoe
Key Points
Following are important points about the Input URL name property −
-
The name property is case-sensitive and should not contain spaces.
-
When a form is submitted, the name property becomes the key in the name-value pair sent to the server.
-
Multiple elements can share the same name (useful for radio buttons or checkboxes), but input URL elements typically have unique names.
-
The name property can be accessed and modified at runtime using JavaScript.
-
If no name attribute is specified in HTML, the property returns an empty string.
Conclusion
The HTML DOM Input URL name property is essential for form processing and element identification. It allows both retrieval and modification of the name attribute value, making it useful for dynamic form manipulation and server-side data processing.
157 Views
