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 −

   
   


   
Select Form Property Demo
   
   

Course Selection Form

Choose a subject: HTML CSS JavaScript Python

Get Form Information

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 −

   
   


   
Multiple Forms with Select Elements
   
   

Personal Information

Country: USA Canada UK India

Educational Background

Degree: Bachelor's Master's PhD

Check Country Form Check Degree Form

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 −

   
   


   
Select Element Outside Form
   
   

Inside Form

Option 1 Option 2

Select element outside any form:

Choice A Choice B
Test Inside Form Test Outside Form

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 form property is read-only and cannot be modified.

• It returns null if the select element is not contained within a form.

• This property is inherited from the HTMLSelectElement interface.

• 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.