title: HTML page layout - multiple form tags
body: <p>I have a twitter-bootstrap &amp; thymeleaf project where I need to have two form tags covering the respective parts of the page as shown below:</p>
  
  <p><a href="https://i.stack.imgur.com/4HPGZ.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4HPGZ.jpg" alt="page layout"></a></p>
  
  <p>The area represented by the <strong>black box</strong> contains two text areas and a submit button. Users can type text into textbox1 and hit submit. the text they type is displayed in textbox2 as date+time+user+commentstring. At the same time it is save in the data base. textbox2 is to hold multiple comments each prefixed with date time and user.</p>
  
  <p>The area represented by the <strong>red box</strong> is the remainder of the form - it has several fields that will be sent to the backend when the main submit button is clicked.</p>
  
  <p>I understand  tags must be closed within the element that they are opened in. Given this constraint - can I have a form tag that covers the red area using bootstrap grid layout. Non-layout centered solutions are welcome.</p>
  
  <p>Thanks</p>
  
  <p><strong>UPDATE 1</strong></p>
  
  <p>Here is a fiddle to demonstrate better : </p>
  
  <p><code>Layout example</code> <a href="https://jsfiddle.net/0an6vwdq/8/" rel="nofollow noreferrer">https://jsfiddle.net/0an6vwdq/8/</a></p>
  
  <p>The two large text boxes and <em>submit note</em> button are area 1. The rest is area 2.</p>
  
  <p><strong>UPDATE 2</strong></p>
  
  <p>The fiddle has the second set of form tags starting on line 24 and closing on line 54 - right after due date picker - the form tags close early and miss the dynamic list at the bottom of the page.</p>
  
  <p>I had to close them early because of the bootstrap grid system and the opening tag being inside a row.</p>
  
  <p>So the question is still how to maintain this layout with bootstrap grid system but have second form tags cover remainder of page.</p>