samedi 27 juin 2015

How to spilit HTML form into 2 Columns

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.

Aucun commentaire:

Enregistrer un commentaire