Monday, January 12, 2015

Code for creating Forms with Bootstrap

Forms are essential element in web for interacting with the users. Forms also should be good enough to attract the user. So, forms should have good interface. Bootstrap provide nice interface and easy to control element. Below is a working code for a complete form:
<!-- Form -->
<div class="container">
    <div class="row">
        <div class="col-md-12">
            <h2>Contact Form</h2>

            <form class="form-horizontal">
                <div class="form-group"> <!-- simple input --> <!-- form-group content one controller of the form -->
                    <label for="name" class="col-sm-2 control-label">Name</label>
                    <div class="col-sm-6">
                        <input type="text" class="form-control" placeholder="Enter your name" />
                    </div>
                </div>
                <div class="form-group"> <!-- email -->
                    <label for="email" class="col-sm-2 control-label">Email</label>
                    <div class="col-sm-6">
                        <input type="email" class="form-control" placeholder="Enter your email" />
                    </div>
                </div>
                <div class="form-group"> <!-- textarea -->
                    <label for="Message" class="col-sm-2 control-label">Message</label>
                    <div class="col-sm-6">
                        <textarea class="form-control" rows="3"></textarea>
                    </div>
                </div>
                <div class="form-group"> <!-- checkbox -->
                    <label for="website" class="col-sm-2 control-label">Website</label>
                    <div class="col-sm-6">
                        <label class="checkbox-inline">
                            <input type="checkbox" value="option1" />YouTube
                        </label >
                        <label class="checkbox-inline">
                            <input type="checkbox" value="option2" />Google
                        </label>
                        <label class="checkbox-inline">
                            <input type="checkbox" value="option3" />Facebook
                        </label>
                    </div>
                </div>
                <!-- radio button -->
                <div class="form-group">
                    <label for="gender" class="col-sm-2 control-label">Gender</label>
                    <div class="col-sm-6">
                        <label class="radio-inline">
                            <input type="radio" name="genderRadio" value="option1" />Male
                        </label >
                        <label class="radio-inline">
                            <input type="radio" name="genderRadio" value="option2" />Female
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="genderRadio" value="option3" />Other
                        </label>
                    </div>
                </div>
                <!-- dropdown option -->
                <div class="form-group">
                    <label for="city" class="col-sm-2 control-label">City</label>
                    <div class="col-sm-6">
                        <select class="form-control">
                            <option>Pokhara</option>
                            <option>Kathmandu</option>
                            <option>Dharan</option>
                            <option>Biratnagar</option>
                            <option>Baglung</option>
                        </select>
                    </div>
                </div>
                <!-- submit and reset button -->
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-6">
                        <button type="submit" class="btn btn-primary">Submit</button>
                        <button type="reset" class="btn btn-default">Clear</button>
                    </div>   
                </div>
            </form>
        </div>
    </div>
</div>
DEMO:
fig: Forms with Bootstrap

No comments:

Post a Comment