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 Object form Property
The HTML DOM Object form property returns a reference to the form element that contains an <object> element. This property is read-only and provides a way to access the parent form from within JavaScript when working with object elements.
Syntax
Following is the syntax for accessing the form property −
ObjectElement.form
Return Value
The property returns a reference to the HTMLFormElement that contains the object, or null if the object element is not enclosed within a form.
Example
Following example demonstrates how to use the Object form property to get a reference to the enclosing form −
<!DOCTYPE html>
<html>
<head>
<title>HTML DOM Object form Property</title>
<style>
form {
width: 70%;
margin: 0 auto;
text-align: center;
font-family: Arial, sans-serif;
}
fieldset {
padding: 20px;
margin: 10px;
border: 2px solid #ccc;
border-radius: 8px;
}
legend {
font-weight: bold;
color: #333;
}
input[type="button"] {
border-radius: 10px;
padding: 8px 16px;
margin: 10px;
background-color: #007bff;
color: white;
border: none;
cursor: pointer;
}
#divDisplay {
margin-top: 15px;
font-weight: bold;
color: #d9534f;
}
</style>
</head>
<body>
<form id="HomePage">
<fieldset>
<legend>HTML DOM Object Form Property</legend>
<object id="objSelect" height="200" data="https://www.tutorialspoint.com/java8/images/java8-mini-logo.jpg">
Your browser does not support the object tag.
</object>
<br>
<input type="button" onclick="getObjectForm()" value="Get Form Reference">
<div id="divDisplay"></div>
</fieldset>
</form>
<script>
var divDisplay = document.getElementById("divDisplay");
var objSelect = document.getElementById("objSelect");
function getObjectForm() {
if (objSelect.form) {
divDisplay.textContent = 'Form ID: ' + objSelect.form.id;
} else {
divDisplay.textContent = 'Object is not inside a form';
}
}
</script>
</body>
</html>
The output shows a form containing an object element and a button. Clicking the button displays the form's ID −
Before clicking: [Image displayed with "Get Form Reference" button] After clicking: Form ID: HomePage
Accessing Form Properties
Once you have a reference to the form, you can access all of its properties and methods. Following example shows how to access additional form information −
<!DOCTYPE html>
<html>
<head>
<title>Object Form Property - Extended Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<form id="dataForm" method="POST" action="/submit">
<h3>Product Information</h3>
<input type="text" name="productName" value="Sample Product"><br><br>
<object id="productImage" data="product.jpg" width="150" height="100">
Product image not available
</object><br><br>
<input type="button" onclick="showFormInfo()" value="Show Form Info">
<div id="formInfo"></div>
</form>
<script>
function showFormInfo() {
var obj = document.getElementById("productImage");
var form = obj.form;
var info = document.getElementById("formInfo");
if (form) {
info.innerHTML = "<strong>Form Details:</strong><br>" +
"ID: " + form.id + "<br>" +
"Method: " + form.method + "<br>" +
"Action: " + form.action + "<br>" +
"Elements count: " + form.elements.length;
}
}
</script>
</body>
</html>
This example demonstrates accessing multiple properties of the form through the object's form reference −
Form Details: ID: dataForm Method: post Action: [current_page]/submit Elements count: 2
Practical Use Cases
The Object form property is useful in the following scenarios −
Form validation − Access form elements for validation when working with object elements
Dynamic form manipulation − Programmatically modify form properties based on object interactions
Event handling − Trigger form-related events when object elements are manipulated
Form submission control − Control form submission behavior based on object states
Browser Compatibility
The Object form property is supported in all modern browsers that support the HTML DOM. However, keep in mind that the <object> element itself has varying levels of support for different content types across browsers.
Conclusion
The HTML DOM Object form property provides a convenient way to access the parent form element from an object element. This property returns a reference to the HTMLFormElement or null if no enclosing form exists, enabling dynamic form manipulation and validation through JavaScript.
253 Views
