如何将HTML表单转换为2列

Question

目前这是我的代码。

<table class="table table-bordered"> 
    <tbody> 
     <tr> 
      <td>   
      <form name="form" ng-submit="" role="form"> 
       <div class="form-group"> 
        <label for="CustomerName">Customer Name</label> 
        <i class="fa fa-key"></i> 
        <input type="text" name="CustomerName" id="CustomerName" class="form-control" ng-model="CustomerName" required /> 
        <span style="color:red" ng-show="form.CustomerName.$dirty && form.CustomerName.$error.required" class="help-block">Customer Name is required</span> 
       </div> 

       <div class="form-group"> 
        <label for="CustomerAddress">Customer Address</label> 
        <i class="fa fa-key"></i> 
        <textarea type="text" name="CustomerAddress" id="CustomerAddress" class="form-control" ng-model="CustomerAddress" rows="4" required ></textarea> 
        <span style="color:red" ng-show="form.CustomerAddress.$dirty && form.CustomerAddress.$error.required" class="help-block">Customer Address is required</span> 
       </div> 

       <div class="form-group"> 
        <label for="CustomerCity">Select City</label> 
        <i class="fa fa-key"></i> 
        <select name="CustomerCity" id="CustomerCity" class="form-control" ng-model="CustomerCity" required> 
         <option value="" ng-selected="selected">-- Select City -- </option> 
         <option value="Chhatarpur">Chhatarpur</option> 
        </select> 
        <span style="color:red" ng-show="form.CustomerCity.$dirty && form.CustomerCity.$error.required" class="help-block">City is required</span> 
       </div> 

       <div class="form-group"> 
        <label for="CustomerMobile">Mobile Number</label> 
        <i class="fa fa-key"></i> 
        <input type="text" name="CustomerMobile" id="CustomerMobile" class="form-control" ng-model="CustomerMobile" maxlength="10" required /> 
        <span style="color:red" ng-show="form.CustomerMobile.$dirty && form.CustomerMobile.$error.required" class="help-block">Mobile Number is required</span> 
       </div> 

       <div class="form-group"> 
        <label for="PaymentOption">Payment Option</label> 
        <i class="fa fa-key"></i> 
        <div> 
         <input type="radio" name="myRadio" ng-model="myRadio" value="1" required> Cash on delivery<br /> 
         <input type="radio" name="myRadio" ng-model="myRadio" value="2" required> Card on delivery<br /> 
        </div> 
       </div> 

      </form> 
      </td> 

      <td> 
       <div class="form-group"> 
        <label for="PaymentOption">Payment Option</label> 
        <i class="fa fa-key"></i> 
        <div> 
         <input type="radio" name="myRadio" ng-model="myRadio" value="1" required>Cash on delivery<br /> 
         <input type="radio" name="myRadio" ng-model="myRadio" value="2" required>Card on delivery<br /> 
        </div> 
        <span style="color:red" ng-show="form.myRadio.$dirty && form.myRadio.$error.required" class="help-block">Mobile Number is required</span> 
       </div> 

       <div class="form-actions"> 
        <button type="submit" ng-disabled="form.$invalid" class="btn btn-danger">Place order</button> 
       </div> 

      </td>      

     </tr> 
    </tbody> 
</table> 

请注意，标记是在第一个内部（即第一列）。我想让第二列字段也是这个表格的一部分。

我应该在哪里移动窗体标签。我试图把它放在后面，但它不工作，因为我认为第一个标签应该是

我也可以使用容器，行和列类的twitter bootstarp，但也有同样的问题（一切都应该是内栏专业）

请帮我对此。

Answer 1

如果我已经正确理解你的问题你想把两个<td>放在一个表格标签中。

解决方案1：表单标签内整个表

<form name="form" ng-submit="" role="form"> 
<table class="table table-bordered"> 
    <tbody> 
     <tr> 
      <td> 
       . . 
      </td> 
      <td> 
       . . 
      </td> 
     </tr> 
    </tbody> 
</table> 
</form> 

如果你不想把整个表格的形式标记内

解决方案2：创建第一内侧另一个表表

<table class="table table-bordered"> 
    <tbody> 
     <tr> 
      <td> 
       <form name="form" ng-submit="" role="form"> 
       <table> 
        <tr> 
         <td> 
          . . 
         </td> 
         <td> 
          . . 
         </td> 
        </tr> 
       </table> 
       </form> 
      </td> 
     </tr> 
    </tbody> 
</table> 

希望这能解决您的问题。

Answer 2

从我的经验;我会选择一个前端框架;

引导：http://getbootstrap.com/ 基金会：http://foundation.zurb.com/

因为他们会给你一大堆的功能;据说那时你可以在旅途中创建栏目;基础是一个更友好的使用，所以你应该放弃它！