title: Splitting a form into tabbed pages using dojo
body: <p>I have a form that as more than a 100 fields across 5 categories of which only 3 fields are necessary and the rest are autofilled or set to default values. Earlier I was using a dijit.TitlePane to split the sections and hide the other remaining sections. </p>
  
  <p>I have now decided to switch to a tabbed model as I would like to distribute my UI more horizontally than vertically. Now when I try to do the same using dijit tabcontainer, the form breaks the tab functionality and all the elements showup in the first tab itself.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;div id="mainTabContainer" dojoType="dijit.layout.TabContainer" region="center" &gt;
      &lt;form id="${cid}form" dojoType="dijit.form.Form" onSubmit="return false"&gt;
      &lt;div class="tabContentSection" dojoType="dijit.layout.ContentPane" title="Section1" selected="true"&gt;
          &lt;table&gt;
          &lt;tr&gt;
              [...]
          &lt;/tr&gt;
  
          &lt;tr id="..."&gt;
              [...]
          &lt;/tr&gt;
  
          &lt;tr id="..."&gt;
              [...]
          &lt;/tr&gt;
  
          &lt;tr&gt;
              [...]
          &lt;/tr&gt;
  
          &lt;tr&gt;
              [...]
          &lt;/tr&gt;
  
          &lt;/table&gt;
      &lt;/div&gt;
  
      &lt;div class="tabContentSection" dojoType="dijit.layout.ContentPane" title="Section2"&gt;
          &lt;table&gt;
          &lt;tr&gt;
              [...]
          &lt;/tr&gt;
  
          &lt;tr&gt;
              [...]
          &lt;/tr&gt;
  
          &lt;/table&gt;
      &lt;/div&gt;
  
      &lt;div class="tabContentSection" dojoType="dijit.layout.ContentPane" title="Section3"&gt;
          [More tab content]
      &lt;/div&gt;
  
      &lt;div class="tabContentSection" dojoType="dijit.layout.ContentPane" title="Calendaring"&gt;
          [More tab content]
      &lt;/div&gt;
  
      &lt;div class="tabContentSection" dojoType="dijit.layout.ContentPane" title="Section3"&gt;
          [More tab content]
      &lt;/div&gt;
  
      &lt;div class="tabContentSection" dojoType="dijit.layout.ContentPane" title="Section4"&gt;
          [More tab content]
      &lt;/div&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now, if I remove the form tags, the tabs show up fine. Can someone help me out of this?</p>