In HTML nesting forms means placing one <form> element inside another is not allowed, although, multiple forms can be possible to create. The HTML specification explicitly specifies that forms cannot be nested. Nesting forms can lead to unexpected behavior and conflicts between forms. As a result, web browsers do not support the nesting of forms.

Syntax:

<form>
    <!-- Form fields and controls go here -->
</form>

Approach: The following approaches will be used to create the multiple forms:

1. Independent Forms: If you need to include multiple forms on a web page, it is best to keep them independent of each other. Each form should be placed outside the scope of any other form. This approach ensures that each form functions correctly and submits its data independently.

2. Sectional Divisions: If you require logical divisions within a single form, you can use HTML elements such as <fieldset> or <div> to group related inputs together. Although these divisions visually appear as separate sections, they are still part of the same form.

Example 1: The following code example demonstrates Independent Forms. Here, we have two separate forms, form 1 and form 2, which are placed independently on the page. Each form can be submitted individually without any conflicts.

Output:

 

Example 2: This code example demonstrates sectional divisions within a form. Here, the mainForm contains logical sections represented by <fieldset>. These sections provide a visual grouping of related inputs within the same form, but they are not separate forms. When the submit button is clicked, the entire form, including all sections, will be submitted together.

Output: