Can we Create a Nested Form in HTML ?

Last Updated : 11 Sep, 2023

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.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Nested Forms</title> 
</head> 
  
<body> 
    <h1 style="color:green"> 
          GeeksforGeeks 
      </h1> 
    <h3>Nesting forms</h3> 
    <p> 
          <b>Form 1:</b> 
      </p> 
    <form id="form1" 
          action="/submitForm1"> 
        
        <!-- Form 1 fields -->
        <label for="name">Name:</label> 
        <input type="text" 
               id="name" 
               name="name" required><br> 
        <label for="email"> 
              Email: 
          </label> 
        <input type="email" 
               id="email" 
               name="email" required><br> 
        <input type="submit" 
               value="Submit Form 1"> 
    </form> 
    <br> 
    <p> 
          <b>Form 2:</b> 
      </p> 
    <form id="form2" 
          action="/submitForm2"> 
        
        <!-- Form 2 fields -->
        <label for="message"> 
              Message: 
          </label><br> 
        <textarea id="message" 
                  name="message" 
                  rows="4" 
                  cols="50" required> 
          </textarea><br> 
        <input type="submit" 
               value="Submit Form 2"> 
    </form> 
</body> 
  
</html>

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.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Sectional Nested Form</title> 
</head> 
  
<body> 
    <h1 style="color:green"> 
          GeeksforGeeks 
      </h1> 
    <form id="mainForm" 
          action="/submitMainForm"> 
        
        <!-- Main form fields -->
        <label for="name"> 
              Name: 
          </label> 
        <input type="text" 
               id="name" 
               name="name" required><br> 
        <label for="email"> 
              Email: 
          </label> 
        <input type="email" 
               id="email" 
               name="email" required><br> 
  
        <fieldset> 
            <legend>Section 1</legend> 
            
            <!-- Section 1 fields -->
            <label for="age">Age:</label> 
            <input type="number" 
                   id="age" 
                   name="age" required><br> 
            <label for="gender">Gender:</label> 
            <select id="gender" 
                    name="gender" required> 
                <option value="">Select</option> 
                <option value="male">Male</option> 
                <option value="female">Female</option> 
                <option value="other">Other</option> 
            </select><br><br> 
        </fieldset> 
  
        <fieldset> 
            <legend>Section 2</legend> 
            
            <!-- Section 2 fields -->
            <label for="message">Message:</label> 
            <textarea id="message" 
                      name="message"
                      rows="4" 
                      cols="50" required> 
              </textarea><br> 
            <label for="rating">Rating:</label> 
            <input type="number" 
                   id="rating" 
                   name="rating" 
                   min="1"
                   max="5" required><br> 
        </fieldset> 
        <br> 
        <button type="submit">Submit</button> 
    </form> 
</body> 
  
</html>