ブートストラップで複数の列を使用する複数のフォーム

Question

2つの異なるアクションに投稿する2列のページを作成しようとしています。しかし、配置は次のようにする必要があります：私は、通常のブートストラップグリッドを使用していながら、適切な場所にそれを置くために管理することができなかったので、

+----------------+ +-----------------+ 
|    | |     | 
|    | | Should post to | 
| Should post to | | Form1   | 
| Form1   | |     | 
|    | |     | 
|    | |     | 
|    | |     | 
|    | +-----------------+ 
|    | +-----------------+ 
|    | |Should post to | 
|    | |Form2   | 
|    | |     | 
|    | |     | 
|    | |     | 
+----------------+ +-----------------+ 
+--------+   +------+ 
|Submit |   |Submit| 
|Form1 |   |Form2 | 
+--------+   +------+ 

何Form2が、今はありません。ページのデザインはどうすればいいですか？フォームタグで入力とdivをどのように囲むべきですか？

編集：現在の状態は次のとおりです。私が述べたように、私はForm2のを置くことができませんでしたまだ..

<div class="row"> 
    <div class="col-md-12"> 

     <form action="/form1"> 
      <div class="col-md-6"> 

       <!-- bootstrap input groups for form 1 //--> 

       <div class="form-group"> 
        <div class="col-lg-9 col-lg-offset-3"> 
         <button type="submit" id="bbtn" class="btn btn-success">first form submit</button>       
        </div> 
       </div> 
      </div> 
      <div class="col-md-6"> 
       <div class="panel panel-default"> 
        <div class="panel-heading">@Localize("AdditionalProductInfo")</div> 
        <div class="panel-body"> 
         <!-- bootstrap input groups for form 1 continued.. //--> 
        </div> 
       </div> 
      </div> 
     </form> 
    </div> 
</div> 

Answer 1

は、フォームの外にあるフォームに要素をリンクするためにHTML5 form属性を使用することができます。構造用

：

<div class="row"> 
    <div class="col-xs-6"> 
    <form id="form1" class="well well-lg"> 
     <div class="form-group"> 
     <label for="exampleInputName">First Name</label> 
     <input type="name" class="form-control" id="exampleInputName" placeholder="First Name"> 
     </div> 
     <div class="form-group"> 
     <label for="exampleInputLastName">Last Name</label> 
     <input type="lastname" class="form-control" id="exampleInputLastName" placeholder="Last Name"> 
     </div> 
     <button type="submit" class="btn btn-default">Submit</button> 
    </form> 
    </div> 
    <div class="col-xs-6"> 
    <div class="well well-lg"> 
     <div class="form-group"> 
     <label for="exampleInputEmail1">Email address</label> 
     <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email" form="form1"> 
     </div> 
     <div class="form-group"> 
     <label for="exampleInputPassword1">Password</label> 
     <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" form="form1"> 
     </div> 
    </div> 
    <form class="well well-lg"> 
     <div class="form-group"> 
     <label for="exampleInputFile">File input</label> 
     <input type="file" id="exampleInputFile"> 
     <p class="help-block">Example block-level help text here.</p> 
     </div> 
     <div class="checkbox"> 
     <label> 
      <input type="checkbox">Check me out 
     </label> 
     </div> 
     <button type="submit" class="btn btn-default">Submit</button> 
    </form> 
    </div> 
</div> 

ここDemo