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 Select form Property
The HTML DOM select form property returns a reference to the form element that contains the dropdown list. This read-only property is useful for identifying which form a select element belongs to, especially in documents with multiple forms.
Syntax
Following is the syntax for the select form property −
selectElement.form
Return Value
The property returns a reference to the form element that contains the select element. If the select element is not within a form, it returns null.
Example − Basic Form Reference
Following example demonstrates how to get the form reference from a select element −
<!DOCTYPE html>
<html>
<head>
<title>Select Form Property</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
form { border: 2px solid #007bff; padding: 20px; margin: 10px 0; border-radius: 8px; }
select { padding: 8px; margin: 10px; width: 200px; }
button { background-color: #007bff; color: white; padding: 10px 15px; border: none; border-radius: 5px; cursor: pointer; }
.result { margin-top: 20px; font-weight: bold; color: #333; }
</style>
</head>
<body>
<h2>Select Form Property Demo</h2>
<form id="courseForm" name="courses">
<legend>Course Selection Form</legend>
<label for="subjects">Choose a subject:</label>
<select id="subjects" name="subjectList">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="js">JavaScript</option>
<option value="python">Python</option>
</select>
</form>
<button onclick="getFormInfo()">Get Form Information</button>
<script>
function getFormInfo() {
var selectElement = document.getElementById("subjects");
var formReference = selectElement.form;
var info = "Form ID: " + formReference.id + "<br>";
info += "Form Name: " + formReference.name;
document.getElementById("output").innerHTML = info;
}
</script>
</body>
</html>
The output displays the form ID and name when the button is clicked −
Form ID: courseForm Form Name: courses
Example − Multiple Forms
Following example shows how to distinguish between multiple forms using the form property −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Forms Example</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
form { border: 2px solid #28a745; padding: 15px; margin: 15px 0; border-radius: 8px; }
select { padding: 8px; margin: 10px; width: 180px; }
button { background-color: #28a745; color: white; padding: 8px 12px; border: none; border-radius: 4px; cursor: pointer; margin: 5px; }
.info { margin-top: 15px; padding: 10px; background-color: #f8f9fa; border-radius: 5px; }
</style>
</head>
<body>
<h2>Multiple Forms with Select Elements</h2>
<form id="personalForm">
<legend>Personal Information</legend>
<label>Country:</label>
<select id="country">
<option>USA</option>
<option>Canada</option>
<option>UK</option>
<option>India</option>
</select>
</form>
<form id="educationForm">
<legend>Educational Background</legend>
<label>Degree:</label>
<select id="degree">
<option>Bachelor's</option>
<option>Master's</option>
<option>PhD</option>
</select>
</form>
<button onclick="checkForm('country')">Check Country Form</button>
<button onclick="checkForm('degree')">Check Degree Form</button>
<script>
function checkForm(selectId) {
var selectElement = document.getElementById(selectId);
var parentForm = selectElement.form;
var message = "Select element '" + selectId + "' belongs to form: " + parentForm.id;
document.getElementById("formInfo").innerHTML = message;
}
</script>
</body>
</html>
Each button identifies which form contains the respective select element −
Select element 'country' belongs to form: personalForm Select element 'degree' belongs to form: educationForm
Example − Select Outside Form
Following example demonstrates what happens when a select element is not within a form −
<!DOCTYPE html>
<html>
<head>
<title>Select Outside Form</title>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
form { border: 2px solid #dc3545; padding: 15px; margin: 15px 0; border-radius: 8px; }
select { padding: 8px; margin: 10px; width: 150px; }
button { background-color: #dc3545; color: white; padding: 8px 12px; border: none; border-radius: 4px; cursor: pointer; margin: 5px; }
.warning { color: #dc3545; font-weight: bold; margin-top: 15px; }
</style>
</head>
<body>
<h2>Select Element Outside Form</h2>
<form id="testForm">
<legend>Inside Form</legend>
<select id="insideSelect">
<option>Option 1</option>
<option>Option 2</option>
</select>
</form>
<p>Select element outside any form:</p>
<select id="outsideSelect">
<option>Choice A</option>
<option>Choice B</option>
</select>
<br>
<button onclick="testFormProperty('insideSelect')">Test Inside Form</button>
<button onclick="testFormProperty('outsideSelect')">Test Outside Form</button>
<script>
function testFormProperty(selectId) {
var selectElement = document.getElementById(selectId);
var formRef = selectElement.form;
var message;
if (formRef === null) {
message = "Select '" + selectId + "' is NOT inside any form (returns null)";
} else {
message = "Select '" + selectId + "' is inside form: " + formRef.id;
}
document.getElementById("result").innerHTML = message;
}
</script>
</body>
</html>
The select element outside the form returns null, while the one inside returns the form reference −
Select 'insideSelect' is inside form: testForm Select 'outsideSelect' is NOT inside any form (returns null)
Key Points
The
formproperty is read-only and cannot be modified.It returns
nullif the select element is not contained within a form.This property is inherited from the
HTMLSelectElementinterface.Useful for form validation and determining the context of select elements in complex documents.
Browser Compatibility
The select form property is supported in all major browsers including Chrome, Firefox, Safari, Edge, and Internet Explorer. It is part of the standard DOM specification and has been available since early browser versions.
Conclusion
The HTML DOM select form property provides a convenient way to access the parent form of a select element. It returns the form reference when the select is inside a form, or null when it's not, making it useful for form validation and dynamic form handling.
232 Views
