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 form Property
The HTML DOM Input URL form property returns a reference to the form element that contains the input URL field. This property is read-only and provides access to the parent form object, allowing you to retrieve form properties like id, name, or action.
Syntax
Following is the syntax for accessing the form property −
inputURLObject.form
Return Value
The property returns a reference to the HTMLFormElement object that contains the input URL field. If the input is not inside a form, it returns null.
Example
Following example demonstrates the Input URL form property usage −
<!DOCTYPE html>
<html>
<head>
<title>Input URL form Property</title>
<style>
form {
width: 70%;
margin: 0 auto;
text-align: center;
padding: 20px;
border: 1px solid #ccc;
border-radius: 8px;
}
input {
padding: 8px;
margin: 5px;
border: 1px solid #ddd;
border-radius: 4px;
}
input[type="button"] {
background-color: #007bff;
color: white;
border: none;
padding: 10px 15px;
border-radius: 5px;
cursor: pointer;
}
#output {
margin-top: 15px;
padding: 10px;
background-color: #f8f9fa;
border-radius: 4px;
}
</style>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<form id="userForm" name="websiteForm" action="/submit">
<fieldset>
<legend>Website URL Form</legend>
<label for="urlInput">Enter Website URL:</label><br>
<input type="url" id="urlInput" name="website" placeholder="https://example.com"><br>
<input type="button" onclick="getFormInfo()" value="Get Form Details">
<div id="output"></div>
</fieldset>
</form>
<script>
function getFormInfo() {
var urlInput = document.getElementById("urlInput");
var output = document.getElementById("output");
if (urlInput.value.trim() !== '') {
var form = urlInput.form;
output.innerHTML =
"Form ID: " + form.id + "<br>" +
"Form Name: " + form.name + "<br>" +
"Form Action: " + form.action + "<br>" +
"URL Value: " + urlInput.value;
} else {
output.textContent = "Please enter a valid URL";
}
}
</script>
</body>
</html>
The output shows the form details when a URL is entered and the button is clicked −
Form ID: userForm Form Name: websiteForm Form Action: /submit URL Value: https://tutorialspoint.com
Accessing Form Methods and Properties
Once you have the form reference, you can access all form properties and methods. Following example shows how to access different form attributes −
<!DOCTYPE html>
<html>
<head>
<title>Form Properties Access</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<form id="contactForm" method="post" action="/contact" target="_blank">
<h3>Contact Form</h3>
<input type="url" id="websiteUrl" placeholder="Your website URL"><br><br>
<input type="button" onclick="showFormProperties()" value="Show Form Properties">
<div id="results" style="margin-top: 15px;"></div>
</form>
<script>
function showFormProperties() {
var urlInput = document.getElementById("websiteUrl");
var results = document.getElementById("results");
var form = urlInput.form;
results.innerHTML =
"<b>Form Properties:</b><br>" +
"ID: " + form.id + "<br>" +
"Method: " + form.method + "<br>" +
"Action: " + form.action + "<br>" +
"Target: " + form.target + "<br>" +
"Number of elements: " + form.elements.length;
}
</script>
</body>
</html>
This demonstrates accessing various form attributes through the form property −
Form Properties: ID: contactForm Method: post Action: /contact Target: _blank Number of elements: 2
Handling Input Outside Form
If an input URL field is not inside a form element, the form property returns null. Following example demonstrates this scenario −
<!DOCTYPE html>
<html>
<head>
<title>URL Input Outside Form</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h3>URL Input Outside Form</h3>
<input type="url" id="standaloneUrl" placeholder="Enter URL">
<input type="button" onclick="checkForm()" value="Check Form Reference">
<div id="message" style="margin-top: 15px;"></div>
<script>
function checkForm() {
var urlInput = document.getElementById("standaloneUrl");
var message = document.getElementById("message");
if (urlInput.form === null) {
message.innerHTML = "<b style='color: red;'>This URL input is not inside a form element.</b>";
} else {
message.innerHTML = "<b style='color: green;'>Form found: " + urlInput.form.id + "</b>";
}
}
</script>
</body>
</html>
Since the input is outside any form, the result shows −
This URL input is not inside a form element.
Browser Compatibility
The form property is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer 9+. It is part of the HTML DOM specification and provides consistent behavior across different browsers.
Conclusion
The Input URL form property provides a convenient way to access the parent form of a URL input field. It returns a reference to the form element, allowing access to form properties like id, name, and action. If the input is not within a form, the property returns null.
173 Views
