Can You Create Nested HTML Forms?

Forms on the web pages are used to get the information from the user and send it to the server. Nesting the form is not allowed in HTML, but you can use other methods to handle multiple forms on a webpage. In this blog, we will discuss why forms can’t be nested, look at alternatives, and discuss some practices to manage more than one form on the webpage.

Table of Contents:

• Understanding HTML Forms
• Can You Nest HTML Forms?
  • Example of Nested Forms (Incorrect)
  • Why Nested Forms Are Not Allowed
• Alternatives to Nesting Forms
  • Method 1: Use Multiple Forms
  • Method 2: Use JavaScript to Handle Multiple Sections
  • Method 3: Use Fieldsets to Group Inputs
• Best Practices
• Conclusion

Understanding HTML Forms

You can use the HTML form element to hold things like fields, buttons, checkboxes, and radio buttons. The user uses the form as a tool to fill in and send information. The methods, such as GET or POST, are used to send the data to the server when the form is submitted.

Basic Structure of an HTML Form:

<form action="/submit" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" required>
    
    <label for="gender">Gender:</label>
    <select id="gender" name="gender">
        <option value="male">Male</option>
        <option value="female">Female</option>
        <option value="other">Other</option>
    </select>
    
    <label for="message">Message:</label>
    <textarea id="message" name="message"></textarea>
    <label>
        <input type="checkbox" name="subscribe" value="yes"> Subscribe to newsletter
    </label>
    <button type="submit">Submit</button>
</form>

Output:

Can You Nest HTML Forms?

No, you cannot nest the HTML form. If you try to put one <form> inside another, browsers will end the first form as soon as they find the second one. This happens because of HTML rules and helps avoid problems with mixed-up submission processes.

Example of Nested Forms (Incorrect):

<form action="/submit1" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
    
    <form action="/submit2" method="post">
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        
        <button type="submit">Submit Inner Form</button>
    </form>
</form>

Why Nested Forms are Not Allowed

• Confusion Submission: If the page has several forms, the browser will find it confusing which one should be submitted.
• Conflict in Form Fields: Putting input fields in nested forms can cause problems and unpredictable results.
• HTML Rules: To maintain the HTML code clean and problem-free.

Alternatives to Nesting Forms

The nesting in form is not allowed in HTML. Therefore, the developers have some other alternatives for this purpose. Let us discuss those methods below.

Method 1: Use Multiple Forms

You can create different sections of the form to avoid confusion during submission. These forms are submitted on their own. You can create separate forms instead of nesting them.   

Example:

<form action="/submit1" method="post">

    <label for="name">Name:</label>

    <input type="text" id="name" name="name" required>

    <button type="submit">Submit Name</button>

</form>

<form action="/submit2" method="post">

    <label for="email">Email:</label>

    <input type="email" id="email" name="email" required>

    <button type="submit">Submit Email</button>

</form>

Output:

Explanation: This code is used to create the two different forms. The first form is created to submit your name, and you can also submit an email through the other one. Click the submit button to submit the data when the fields are filled.

Method 2: Use JavaScript to Handle Multiple Sections

You can use JavaScript instead of nesting the form for submitting and managing multiple information.

Example:

<form id="mainForm">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    <button type="button" onclick="submitForms()">Submit</button>
</form>

<script>
function submitForms() {
    let formData = new FormData(document.getElementById('mainForm'));
    fetch('/submit', {
        method: 'POST',
        body: formData
    }).then(response => response.json()).then(data => {
        console.log('Success:', data);
    }).catch(error => {
        console.error('Error:', error);
    });
}
</script>

Output:

Explanation: This code creates a single form that has two input fields. One field is to enter the name, and the other is for email. You can use the POST request to send the data to the server.

Method 3: Use Fieldsets to Group Inputs

You can use <fieldset> instead of nesting the formto group the logically related inputs in a single form.     

Example:

<form action="/submit" method="post">
    <fieldset>
        <legend>Personal Information</legend>
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>
    </fieldset>
    
    <fieldset>
        <legend>Contact Information</legend>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
    </fieldset>
    
    <button type="submit">Submit</button>
</form>

Output:

Explanation: This code is used to create a single form with related inputs. You can enter your name in one section and your email in another. The data is sent to the server once you click on the submit button.

Best Practices

• Don’t Nest Forms: You can use JavaScript or fieldsets to have multiple forms in an HTML document. Since the browser does not allow nested forms.
• Create Separate Forms for Different Actions: You can make separate forms to process different sections differently.
• Use JavaScript for Complex Tasks: You can validate or submit multiple parts of the webpage using JavaScript.
• Focus on Accessibility: You can add proper labels and fieldsets to make the form user-friendly.

Conclusion

Nesting in HTML form is not allowed, but some alternative methods are present to manage the multiple sections. You can use JavaScript or fieldsets to maintain multiple forms, and you can also create separate forms for the different submissions. Follow the best practices mentioned in this blog for creating user-friendly forms without nesting.

FAQs