How to spilit HTML form into 2 Columns

Question

Currently this is my code.

<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>

Please note that tag is inside first (i.e.first column). I want to make second column fields also the part of this form.

Where should i move form tag now. i tried putting it just after , but its not working, as i think after first tag should be

I am also ok to use container, row and column classes of twitter bootstarp, but there also the same problem (everything should be inside column class)

Please help me on this.

Answer 1

If I have understood properly your question You want to put both <td> inside a form tag.

Solution 1 : whole table inside a form tag

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

If you don't want to put the whole table inside form tag

Solution 2 : create another table inside first table

<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>

Hope this will solve your problem.

Answer 2

From my experience; I would opt for a frontend framework;

Bootstrap: http://getbootstrap.com/ Foundation: http://foundation.zurb.com/

As they'll give you a whole lot of functionality; that being said then you could create columns on the go; foundation is a bit more friendly to use so you should give it a go!