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

如果我已正确理解您的问题您想将\d+放在表单标记中。

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

[a-zA-Z]

如果您不想将整个表格放在表格标签

中

解决方案2：在第一个表格中创建另一个表

<td>

希望这能解决您的问题。

Answer 2

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

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

因为他们会给你很多功能;那么说，你可以随时创建列;基础使用起来更友好，所以你应该试一试！

如何将HTML表单扩展为2列

2 个答案: