In the previous article we have discussed about bootstrap forms and their implementation. But as we know that every html form has many controls. Alike those forms bootstrap forms also have some unique and useful control to work with. Bootstrap form natively supports the most common form controls mainly input, textarea, checkbox, radio, and select .In this article we are not only going to discuss about implementation of these controls, but also when and how many ways we can implement them.
The most common bootstrap form text field is the input—this is where users will enter most of the essential form data. Bootstrap offers support for all native HTML5 input types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color. Proper type declaration is required to make Inputs fully styled.
The textarea is used when you need multiple lines of input. Change rows attribute as necessary (fewer rows = smaller box, more rows = bigger box).
CHECKBOXES AND RADIO Buttons:
Checkboxes and radio buttons are great when we want users to choose from a list of preset options.When building a bootstrap form, use checkbox if we want the user to select any number of options from a list. Use radio if you want to limit the user to just one selection. Use .checkbox-inline or .radio-inline class to a series of checkboxes or radios for controls appear on the same line.
A select is used when we want to allow the user to pick from multiple options, but by default it only allows one. Use <select> for list options with which the user is familiar, such as states or numbers. Use multiple=”multiple” to allow the user to select more than one option.
Form Control States:
In addition to the: focus (i.e., a user clicks into the input or tabs onto it) state, Bootstrap offers styling for disabled inputs and classes for form validation.
When an input receives: focus, the outline of the input is removed and a box-shadow is applied.
If we need to disable an input, simply adding the disabled attribute will not only disable it, it will also change the styling and the mouse cursor when the cursor hovers over the element.
Add the disabled attribute to a <fieldset> to disable all the controls within the <fieldset> at once.
Bootstrap form includes validation styles for error, warning, and success messages. To use, simply add the appropriate class (.has-warning, .has-error, or .has-success) to the parent element.
Bootstrap form controls can have a block level help text that flows with the inputs. To add a full width block of content, use the .help-block after the <input>.
In the above we have discussed about the controls of a bootstrap form. In the below we are going to try it in a sample code.
<form class="form-horizontal" role="form"> <div class="form-group"> <label for="firstname" class="col-sm-2 control-label">First Name</label> <div class="col-sm-10"> <input type="text" class="form-control" id="firstname" placeholder="Enter First Name"> </div> </div> <div class="form-group"> <label for="lastname" class="col-sm-2 control-label">Last Name</label> <div class="col-sm-10"> <input type="text" class="form-control" id="lastname" placeholder="Enter Last Name"> </div> </div> <div class="form-group"> <label for="name" class="col-sm-2 control-label">Address</label> <div class="col-sm-10"> <textarea class="form-control" rows="3"></textarea> </div> </div> <label for="name" class="col-sm-2 control-label">Gender </label> <div class="col-sm-10"> <input type="radio" name="optionsRadiosinline" id="optionsRadios3" value="option1" checked> Male <input type="radio" name="optionsRadiosinline" id="optionsRadios4" value="option2"> Female </div> <br/> <div> <label for="name">Country</label> <div class="col-sm-10"> <select class="form-control"> <option>Enter Your Country</option> <option>India</option> <option>US</option> <option>UK</option> <option>Australia</option> </select></div></div><br /> </form>