Can Two Forms Be Nested?

Can two forms be nested? The answer is no and yes:

• No. You can not nest two forms directly. XHTML schema does not allow that.
• Yes. You can nest two forms indirectly. See the tutorial example below.
• No. Two nested form do not work as two forms. Browsers will treat them as one form, which starts from the opening tag of the outer form, and ends at the ending tag of the inner form. Input fields between the ending tag of the inner form and the ending tag of the outer form will be ignored.

Here is a tutorial example of two nested forms:

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 <head>
  <title>Nested Forms</title>
 </head>
 <body>
  <h4>Online Survey</h4>
  <form action="http://localhost/submit" method="get">
  <ul style="background-color: #eeeeee; padding: 8px;">
   <li>Your name: <input type="text" name="name"
    value="Joe"/></li>
   <li>
  <form action="http://localhost/submit" method="get">
  <p style="background-color: #ffeeee; padding: 8px;">
   How did you find FYIcenter:<br/>
    &nbsp; &nbsp; <input type="radio" name="channel"
     value="google" checked="checked"/>Google search<br/>
    &nbsp; &nbsp; <input type="radio" name="channel"
     value="yahoo"/>Yahoo search<br/>
    &nbsp; &nbsp; <input type="radio" name="channel"
     value="friend"/>Your friend<br/>
   <input type="submit" name="inner"
    value="Inner submit"/>
  </p>
  </form>
   </li>
   <li>Your age: <input type="text" name="name"
    value="18+"/></li>
   <li><input type="submit" name="outer"
    value="Outer submit"/></li>
  </ul>
  </form>
 </body>
</html>

If you save the above document as nested_forms.html, and view it with Internet Explorer, it looks like we have two forms on the page, but there is actually only one form. Go click on those buttons to see what will happen:

⇒ Browsers Supporting Multiple HTML Forms

⇐ HTML Input Field 'label' Tag/Element

⇑ HTML Forms and Input Fields

⇑⇑ HTML Tutorials