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 Radio form Property
The HTML DOM Input Radio form property returns a reference to the form element that contains the given radio button. If the radio button is not inside a form, this property returns null. This is a read-only property that helps identify which form controls a specific radio button.
Syntax
Following is the syntax for the input radio form property −
radioObject.form
Return Value
The form property returns −
Form object − A reference to the form element that contains the radio button
null − If the radio button is not inside any form element
Example − Getting Form ID
Following example demonstrates how to get the ID of the form containing a radio button −
<!DOCTYPE html>
<html>
<head>
<title>Input Radio Form Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Input Radio Form Property</h2>
<form id="FORM1">
<p>FRUIT:</p>
<input type="radio" name="fruits" id="Mango"> Mango<br>
<input type="radio" name="fruits" id="Apple"> Apple<br>
<input type="radio" name="fruits" id="Orange"> Orange
</form>
<p>Click the button to get the form ID containing the radio buttons:</p>
<button type="button" onclick="getFormId()">GET FORM ID</button>
<p id="result"></p>
<script>
function getFormId() {
var formId = document.getElementById("Mango").form.id;
document.getElementById("result").innerHTML = "The ID of the form containing the radio button is: " + formId;
}
</script>
</body>
</html>
The output shows the form ID when the button is clicked −
Input Radio Form Property FRUIT: ? Mango ? Apple ? Orange Click the button to get the form ID containing the radio buttons: [GET FORM ID] (After clicking button:) The ID of the form containing the radio button is: FORM1
Example − Radio Button Outside Form
Following example shows what happens when a radio button is not inside any form −
<!DOCTYPE html>
<html>
<head>
<title>Radio Outside Form</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Radio Button Outside Form</h2>
<p>COLOR:</p>
<input type="radio" name="colors" id="Red"> Red<br>
<input type="radio" name="colors" id="Blue"> Blue
<br><br>
<button type="button" onclick="checkForm()">CHECK FORM</button>
<p id="output"></p>
<script>
function checkForm() {
var form = document.getElementById("Red").form;
if (form === null) {
document.getElementById("output").innerHTML = "Radio button is not inside any form (returns null)";
} else {
document.getElementById("output").innerHTML = "Form ID: " + form.id;
}
}
</script>
</body>
</html>
The output demonstrates that radio buttons outside a form return null −
Radio Button Outside Form COLOR: ? Red ? Blue [CHECK FORM] (After clicking button:) Radio button is not inside any form (returns null)
Example − Multiple Forms
Following example shows how to identify which form contains specific radio buttons when multiple forms are present −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Forms Example</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Multiple Forms with Radio Buttons</h2>
<form id="userForm">
<p>User Type:</p>
<input type="radio" name="userType" id="student"> Student<br>
<input type="radio" name="userType" id="teacher"> Teacher
</form>
<br>
<form id="paymentForm">
<p>Payment Method:</p>
<input type="radio" name="payment" id="credit"> Credit Card<br>
<input type="radio" name="payment" id="paypal"> PayPal
</form>
<br>
<button type="button" onclick="identifyForms()">IDENTIFY FORMS</button>
<p id="formInfo"></p>
<script>
function identifyForms() {
var studentForm = document.getElementById("student").form.id;
var paymentFormObj = document.getElementById("credit").form.id;
document.getElementById("formInfo").innerHTML =
"Student radio is in form: " + studentForm + "<br>" +
"Credit radio is in form: " + paymentFormObj;
}
</script>
</body>
</html>
The output shows how different radio buttons belong to different forms −
Multiple Forms with Radio Buttons User Type: ? Student ? Teacher Payment Method: ? Credit Card ? PayPal [IDENTIFY FORMS] (After clicking button:) Student radio is in form: userForm Credit radio is in form: paymentForm
Key Points
The form property is read-only and cannot be modified
Returns
nullif the radio button is not inside a form elementUseful for form validation and identifying which form a radio button belongs to
Works with all radio buttons regardless of their position within the form
Can be used to access other properties of the parent form like
action,method, etc.
Conclusion
The HTML DOM Input Radio form property provides a convenient way to access the parent form of any radio button. It returns the form object reference if the radio button is inside a form, or null if it exists outside any form. This property is particularly useful for form validation scripts and dynamic form manipulation.
199 Views
