Working with Forms in Bootstrap part-2

Goud.Kv
Posted by in Bootstrap category on for Beginner level | Points: 250 | Views : 3146 red flag
Rating: 5 out of 5  
 1 vote(s)

Bootstrap is the CSS technology which contains predefined Styles that are used to achieve high level of attractiveness in web designs.
Recommendation
Read Working with Forms in Bootstrap part-1 before this article.

Introduction

Please go through Bootstrap Introduction if you are new to Bootstrap.
Well, So far we have seen different types of forms in Bootstrap.Lets see some more of them in this chapter.

Objective

The main objective of this article is to know about Grouping elements with Inputs and Form Validations using Bootstrap.

Using the code

Grouping elements such as dropdowns, checkboxes, radiobuttons, buttons etc. makes the webpage nice look and feel. Lets Discuss one by one,

Grouping Inputs with Dropdown menu using Bootstrap
Dropdown menu gives more beauty to a webpage. Now lets try to combine the textbox with dropdown menu using predefined styles of bootstrap.css.
Below is the example code for that scenario,
<form>
    <div class="row">
        <div class="col-xs-3">
            <div class="input-group">
                <div class="input-group-btn">
                    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Home <span class="caret"></span></button>
                    <ul class="dropdown-menu">
                        <li><a href="#">Photos</a></li>
                        <li><a href="#">Videos</a></li>
                        <li><a href="#">Music</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Games</a></li>
                        <li><a href="#">Drawings</a></li>
                        <li><a href="#">Charts</a></li>
                    </ul>
                </div>
                <input type="text" class="form-control">
            </div>
        </div>
        <div class="col-xs-3">
            <div class="input-group">
                <input type="text" class="form-control">
                <div class="input-group-btn">
                    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Mobile <span class="caret"></span></button>
                    <ul class="dropdown-menu pull-right">
                        <li><a href="#">Calls</a></li>
                        <li><a href="#">Messages</a></li>
                        <li><a href="#">Email</a></li>
                        <li class="divider"></li>
                        <li><a href="#">Games</a></li>
                        <li><a href="#">Music</a></li>
                        <li><a href="#">Gallery</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</form>
If you observe the above code, there are some class files named input-group, input-group-btn which groups the elements. dropdown-toggle class is for toggling the menu click. caret is for the dropdown icon.
Now run the above code in your browser and you will see the following output

Grouping Input with Search Button
Using Bootstrap, we can easily create a beautiful Search box with Button grouped to it.
<form>
        <div class="row">
            <div class="col-xs-7">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Enter keyword to Search">
                    <span class="input-group-btn">
                        <button type="button" class="btn btn-success"><span class="glyphicon glyphicon-search"></span> Find</button>
                    </span>
                </div>
            </div>
        </div>
</form>
In the Above example, we have used Grouping classes of Bootstrap. Output of the above code will be,

Thats it !!, Its pretty easy to create an awesome search box like above in Bootstrap.

Grouping RadioButton and CheckBox to the Inputs
Now lets see grouping Checkbox and a Radiobutton to the textbox.
<form>
        <div class="row">
            <div class="col-xs-5">
                <div class="input-group">
                    <input type="text" class="form-control">
                    <div class="input-group-addon">
                        <input type="checkbox">
                    </div>
                </div>
            </div>
            <div class="col-xs-5">
                <div class="input-group">
                    <input type="text" class="form-control">
                    <div class="input-group-addon">
                        <input type="radio">
                    </div>
                </div>
            </div>
        </div>
</form>
Try the above example and run it in your browser. You will see the following output.


Creating a disabled Input
In some cases there is a need of input that has to be disabled in certain conditions.
<form>
        <input type="text" class="form-control" placeholder="Disabled input" disabled="disabled">
</form>
As we already know that setting disabled property of input to 'disabled' will makes our input to be disabled.
Output of the above code will be,

Creating Validation Forms using Bootstrap
Validation to the inputs is necessary to any web application to ensure good database without duplicates and also for high security.
Below example shows an overview of validations for different type of inputs with Bootstrap.
<form class="form-horizontal">
        <div class="form-group has-success">
            <label class="col-xs-2 control-label" for="inputSuccess">Username</label>
            <div class="col-xs-8">
                <div class="input-group">
                    <input type="text" id="inputSuccess" class="form-control" placeholder="Good Input">
                    <div class="input-group-btn">
                        <button class="btn btn-primary">Check Availability</button>
                    </div>
                </div>
                <span class="help-block">This name is available</span>
            </div>
        </div>
        <div class="form-group has-warning">
            <label class="col-xs-2 control-label" for="inputWarning">Password</label>
            <div class="col-xs-10">
                <input type="password" id="inputWarning" class="form-control" placeholder="Warning Input">
                <span class="help-block">Choose Strong Password</span>
            </div>
            <label class="col-xs-2 control-label" for="inputWarning">Confirm Password</label>
            <div class="col-xs-10">
                <input type="password" id="inputWarning" class="form-control" placeholder="Warning Input">
                <span class="help-block">Choose Strong Password</span>
            </div>
        </div>
        <div class="form-group has-error">
            <label class="col-xs-2 control-label" for="inputError">Email</label>
            <div class="col-xs-10">
                <input type="email" id="inputError" class="form-control" placeholder="Error Input">
                <span class="help-block">Please enter a valid email address</span>
            </div>
        </div>
        <button class="btn btn-danger">Back</button>
        <button class="btn btn-success">Register</button>
        <button class="btn btn-warning">Reset Fields</button>
</form>
warning, error, success, danger etc. are the colorful themes which we can find in bootstrap.css. These predefined styles beautifies the Html elements.
Now Run the above code in your browser and you will see the Validation forms as below

Conclusion

In this article, we have seen different types of Grouping elements with Inputs and Form Validation structure using Bootstrap. Hope you understand. If you have any doubts or confusions in this chapter, please feel free to comment below.

Thanks for reading.



Recommendation
Read Working with Images in Bootstrap after this article.
Page copy protected against web site content infringement by Copyscape

About the Author

Goud.Kv
Full Name: Krishna Vamshi Goud
Member Level: Gold
Member Status: Member,MVP
Member Since: 2/12/2014 2:34:09 AM
Country: India
Thanks & Regards, Krishna


Login to vote for this post.

Comments or Responses

Login to post response

Comment using Facebook(Author doesn't get notification)