Bootstrap is the CSS technology which contains predefined Styles that are used to achieve high level of attractiveness in web designs.
Introduction
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.