HTML Nested Form

In this article, we will see if can we create a nested form in HTML. Creating multiple forms within a form using <form> tag is called a nested form. But we can’t create nested forms. Even if we create a nested form, it will automatically create separately. Let’s see an example:

<form name="outerform">
            <p>Name : </p><input type="name" name="name">      
             <input type="submit" value="outer submit">
      <form name="innerform" >
            <p>E-mail : </p><input type="email" name="email">
            <p>Password : </p><input type="password" name="pass">
             <input type="submit" value="inner submit">
      </form>
   </form>

In this example code, we have created a form and inside it another form. Outside the form, we have gotten a “Name” input and created a “Submit” button. Inside the inner form, we have gotten “Email”, and “Password” and created a “Submit” button.

See the above output, outer and inner form is successfully displayed. But see the element’s output below:

The child form is automatically merged with the parent form. Understand that, even if we create a nested form it will be merged, So we can create forms separately like:

<form name="outerform">
    <p>Name : </p><input type="name" name="name">      
    <input type="submit" value="outer submit">
</form>

<form name="innerform" >
   <p>E-mail : </p><input type="email" name="email">
   <p>Password : </p><input type="password" name="pass">
   <input type="submit" value="inner submit">
</form>

Here, we have created two forms separately. This also gives us the same output. So, if you want to create a group form together, you need to use the <fieldset> or <legend> tags.

In summary, although it is possible to create a nested form in HTML, it may cause browser compatibility issues and is not recommended as it violates the HTML specification. It’s best to use other HTML elements to group related form elements together