Hello folks! welcome back to a new edition of our tutorial on Bootstrap. In this tutorial, we are going to be studying how to create forms using Bootstrap.
Bootstrap makes it easy with simple HTML markup and extended classes for different styles of forms.
Bootstrap makes it easy with simple HTML markup and extended classes for different styles of forms.
Form Layout
Bootstrap provides you with following types of form layouts -
- Vertical form
- In-line form
- Horizontal form
Vertical or Basic Form
The vertical or basic form structure comes with Bootstrap Framework; individual form controls automatically receive some global styling. Following are the steps to create a basic form -
- First add a role form to the parent <form> element.
- Wrap labels and controls in a <div> with the .form-group class. This is needed for optimum spacing.
- Add a class of .form-control to all of the textual <input>, <textarea>, and <select> elements.
Example
Following below is a simple example -
<form role = "form"> <div class = "form-group"> <label for = "name">Name</label> <input type = "text" class = "form-control" id = "name" placeholder = "Enter Name"> </div> <div class = "form-group"> <label for = "inputfile">File input</label> <input type = "file" id = "inputfile"> <p class = "help-block">Example block-level help text here.</p> </div> <div class = "checkbox"> <label><input type = "checkbox"> Check me out</label> </div> <button type = "submit" class = "btn btn-default">Submit</button> </form>
Output
When the above example is executed, it will produce the following result -
Inline Form
To create a form where all the elements are inline, left aligned and labels alongside, add the .form-inline class to the <form> tag.
Example
Following below is a simple example -
<form class = "form-inline" role = "form"> <div class = "form-group"> <label class = "sr-only" for = "name">Name</label> <input type = "text" class = "form-control" id = "name" placeholder = "Enter Name"> </div> <div class = "form-group"> <label class = "sr-only" for = "inputfile">File input</label> <input type = "file" id = "inputfile"> </div> <div class = "checkbox"> <label><input type = "checkbox"> Check me out</label> </div> <button type = "submit" class = "btn btn-default">Submit</button> </form>
Output
When the above example is executed, it will produce the following result -
- By default input, selects and textareas have a 100% width. You need to set a width on the form controls when you are using inline form.
- Using the .sr-only class you can hide the labels of the inline forms.
READ: Bootstrap | Grid System
Horizontal Form
Horizontal forms stands apart from others not only in the amount of markup, but also in the presentation of the form. To create a form that uses the horizontal layout, do the following -
- Add a .form-horizontal class to the parent <form> element.
- Wrap labels and controls in <div> with a .form-group class.
- Add a .control-label class to the labels.
Example
Following below is a simple example -
<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"> <div class = "col-sm-offset-2 col-sm-10"> <div class = "checkbox"> <label><input type = "checkbox"> Remember me</label> </div> </div> </div> <div class = "form-group"> <div class = "col-sm-offset-2 col-sm-10"> <button type = "submit" class = "btn btn-default">Sign in</button> </div> </div> </form>
Output
When the above example is executed, it will produce the following result -
Supported Form Controls
Bootstrap supports the most common form controls mainly input, textarea, radio, select, and checkbox.
Inputs
The conventional text field in a form is the input field. This is where the users will enter most of the essential form data. Bootstrap provides support for all native HTML5 input types: text, password, datetime, date, month, time, week, number, datetime-local, tel, url, search and color. Proper type declaration is required to make inputs fully styled.
Example
Following below is a simple example -
<form role = "form"> <div class = "form-group"> <label for = "name">Label</label> <input type = "text" class = "form-control" placeholder = "Text input"> </div> </form>
Output
When the above example is executed, it will produce the following result -
Textarea
The textarea is used when multiple lines of input are needed. Change rows attribute as necessary (fewer rows = smaller box, more rows = bigger box).
Example
Following below is a simple example -
<form role = "form"> <div class = "form-group"> <label for = "name">Text Area</label> <textarea class = "form-control" rows = "3"></textarea> </div> </form>
Output
When the above example is executed, it will produce the following result -
READ: Bootstrap | Typography
CheckBoxes and Radio Buttons
Checkboxes and radio buttons can be used when you want users to choose from a list of preset options.
- When building a form, use the checkbox if you want the user to select any number of options from a list. Use radio button 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 the controls appear on the same line.
Example
The following example demonstrates both (default and inline) types -
<label for = "name">Example of Default Checkbox and radio button </label> <div class = "checkbox"> <label> <input type = "checkbox" value = "">Option 1 </label> </div> <div class = "checkbox"> <label> <input type = "checkbox" value = "">Option 2 </label> </div> <div class = "radio"> <label> <input type = "radio" name = "optionsRadios" id = "optionsRadios1" value = "option1" checked> Option 1 </label> </div> <div class = "radio"> <label> <input type = "radio" name = "optionsRadios" id = "optionsRadios2" value = "option2"> Option 2 - selecting it will deselect option 1 </label> </div> <label for = "name">Example of Inline Checkbox and radio button </label> <div> <label class = "checkbox-inline"> <input type = "checkbox" id = "inlineCheckbox1" value = "option1"> Option 1 </label> <label class = "checkbox-inline"> <input type = "checkbox" id = "inlineCheckbox2" value = "option2"> Option 2 </label> <label class = "checkbox-inline"> <input type = "checkbox" id = "inlineCheckbox3" value = "option3"> Option 3 </label> <label class = "checkbox-inline"> <input type = "radio" name = "optionsRadiosinline" id = "optionsRadios3" value = "option1" checked> Option 1 </label> <label class = "checkbox-inline"> <input type = "radio" name = "optionsRadiosinline" id = "optionsRadios4" value = "option2"> Option 2 </label> </div>
Output
When the above example is executed, it will produce the following result -
Selects
A select is used when you want to allow the user to select from multiple options, but by default it only allows one.
- Use <select> for list options with which the user is familiar, like states or numbers.
- Use multiple = "multiple" to allow the users to select more than one option.
Example
The following example demonstrates both (select and multiple) types -
<form role = "form"> <div class = "form-group"> <label for = "name">Select list</label> <select class = "form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> <label for = "name">Mutiple Select list</label> <select multiple class = "form-control"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> </select> </div> </form>
Output
When the above example is executed, it will produce the following result -
Static Control
Use the .form-control-static class on <p> tag when you need to place plain text next to a form label within a horizontal form.
Example
Following below is a simple example -
<form class = "form-horizontal" role = "form"> <div class = "form-group"> <label class = "col-sm-2 control-label">Email</label> <div class = "col-sm-10"> <p class = "form-control-static">email@example.com</p> </div> </div> <div class = "form-group"> <label for = "inputPassword" class = "col-sm-2 control-label">Password</label> <div class = "col-sm-10"> <input type = "password" class = "form-control" id = "inputPassword" placeholder = "Password"> </div> </div> </form>
Output
When the above example is executed, it will produce the following result -
READ: Bootstrap | Code
Form Control States
In addition to :focus state, Bootstrap offers styling for disabled inputs and classes for form validation.
Input Focus
When an input receives :focus, the outline of the input is removed and a box-shadow is applied.
Disabled Inputs
If you need to disable an input, 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.
Disabled Fieldsets
Add the disabled attribute to a <fieldset> to disable all the controls within the <fieldset> at once.
Validation States
Bootstrap gives validation styles for errors, warnings, and success messages. To use, simply add the appropriate class (.has-error, .has-warning, or .has-success) to the parent element.
Example
The following example demonstrates all the form control states -
<form class = "form-horizontal" role = "form"> <div class = "form-group"> <label class = "col-sm-2 control-label">Focused</label> <div class = "col-sm-10"> <input class = "form-control" id = "focusedInput" type = "text" value = "This is focused..."> </div> </div> <div class = "form-group"> <label for = "inputPassword" class = "col-sm-2 control-label"> Disabled </label> <div class = "col-sm-10"> <input class = "form-control" id = "disabledInput" type = "text" placeholder = "Disabled input here..." disabled> </div> </div> <fieldset disabled> <div class = "form-group"> <label for = "disabledTextInput" class = "col-sm-2 control-label"> Disabled input (Fieldset disabled) </label> <div class = "col-sm-10"> <input type = "text" id = "disabledTextInput" class = "form-control" placeholder = "Disabled input"> </div> </div> <div class = "form-group"> <label for = "disabledSelect" class = "col-sm-2 control-label"> Disabled select menu (Fieldset disabled) </label> <div class = "col-sm-10"> <select id = "disabledSelect" class = "form-control"> <option>Disabled select</option> </select> </div> </div> </fieldset> <div class = "form-group has-success"> <label class = "col-sm-2 control-label" for = "inputSuccess"> Input with success </label> <div class = "col-sm-10"> <input type = "text" class = "form-control" id = "inputSuccess"> </div> </div> <div class = "form-group has-warning"> <label class = "col-sm-2 control-label" for = "inputWarning"> Input with warning </label> <div class = "col-sm-10"> <input type = "text" class = "form-control" id = "inputWarning"> </div> </div> <div class = "form-group has-error"> <label class = "col-sm-2 control-label" for = "inputError"> Input with error </label> <div class = "col-sm-10"> <input type = "text" class = "form-control" id = "inputError"> </div> </div> </form>
Output
When the above example is executed, it will produce the following result -
Form Control Sizing
You can set heights and widths of forms by making use of classes such as .input-lg and .col-lg-* respectively.
Example
Following below is a simple example -
<form role = "form"> <div class = "form-group"> <input class = "form-control input-lg" type = "text" placeholder =".input-lg"> </div> <div class = "form-group"> <input class = "form-control" type = "text" placeholder = "Default input"> </div> <div class = "form-group"> <input class = "form-control input-sm" type = "text" placeholder = ".input-sm"> </div> <div class = "form-group"></div> <div class = "form-group"> <select class = "form-control input-lg"> <option value = "">.input-lg</option> </select> </div> <div class = "form-group"> <select class = "form-control"> <option value = "">Default select</option> </select> </div> <div class = "form-group"> <select class = "form-control input-sm"> <option value = "">.input-sm</option> </select> </div> <div class = "row"> <div class = "col-lg-2"> <input type = "text" class = "form-control" placeholder = ".col-lg-2"> </div> <div class = "col-lg-3"> <input type = "text" class = "form-control" placeholder = ".col-lg-3"> </div> <div class = "col-lg-4"> <input type = "text" class = "form-control" placeholder = ".col-lg-4"> </div> </div> </form>
Output
When the above example is executed, it will produce the following result -
Help Text
Bootstrap form controls can have a block level help text that flows with the inputs. To add a full width block of content, make use of the .help-block after the <input>.
Example
Following below is a simple example -
<form role = "form"> <span>Example of Help Text</span> <input class = "form-control" type = "text" placeholder = ""> <span class = "help-block"> A longer block of help text that breaks onto a new line and may extend beyond one line. </span> </form>
Output
When the above example is executed, it will produce the following result -
READ: Bootstrap | Tables
Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial guide, we are going to be studying about the Bootstrap Buttons.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.