This article will help you to study how to create forms easily using Bootstrap. You can make it easy with the simple HTML markup using different styles of Bootstrap forms with extensive classes.
Form Layout
Bootstrap gives different types of form layouts.
- Vertical (default) form
- Inline form
- Horizontal form
Vertical or Basic Form
The basic form composition approaches with Bootstrap, some global styles applied automatically on form controls. For make basic forms use the following code.
Use a role form in the the main tag <form>.
Wrap labels and input tags in a <div> and use class .form-group. This is required for best possible spacings in the controls.
Use this class of ".form-control" to all form controls <input>, <textarea>, and <select> tags.
<form role="form">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<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>
Inline form
For making all elements of form in one row or inline add this class “.form-inline” in the <form> tag. After using “.form-inline” class all tags would be left aligned and labels are also alongside.
<form class="form-inline" role="form">
<div class="form-group">
<label class="sr-only" for="exampleInputEmail2">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputPassword2">Password</label>
<input type="password" class="form-control" id="exampleInputPassword2" placeholder="Password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Sign in</button>
</form>
- All the form controls like inputs, selects and textareas used by default 100% width in Bootstrap. You will have to need set a width on the form controls as per your design requirements.
- You can hide the labels of the inline forms using the class “.sr-only”.
Horizontal form
Horizontal form stands separately as of the others not only in the wrap of markup, other than also in the appearance of the form. Uses the horizontal layout to make a form that, do the below mentioned steps:
Add this class of .form-horizontal to the main tag<form>.
Wrap your labels and input tags in a <div> and use class .form-group. This is required for best possible spacings in the controls.
Use the class of ".control-label" for the labels.
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">Password</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
</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>
Supported Form Controls
Bootstrap also supports the most known form controls mainly input, textarea, checkbox, radio, and select.
Inputs
The commonly used text field of form is the input type is text where users can enter most of the necessary form data. Bootstrap offers support for all HTML5 input types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color. Appropriate type declaration of input fields is necessary to make them fully styled.
<form role="form">
<div class="form-group">
<label for="name">Label</label>
<input type="text" class="form-control" placeholder="Text input">
</div>
</form>
Textarea
The textarea control is used when you require more than one lines for user input just like message, comments etc. As per your requirements change attribute of rows attribute like fewer rows = smaller box, more rows = bigger box.
<form role="form">
<div class="form-group">
<label for="name">Text Area</label>
<textarea class="form-control" rows="3"></textarea>
</div>
</form>
CheckBoxes and Radios
Checkboxes are used for multiple choices and radio buttons are single choice from many, both are great when you would like users to select from a list of current available options.
While making a form, use checkbox if you have to the visitor to choose multiple numbers of options from a list and use radio if you would like to bind the user to just one choice.
The following example displays default type:
<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>- Use these class .checkbox-inline or .radio-inline for the series of checkboxes or radio buttons for controls display them on the same line.
The following example shows inline type:
<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>
Selects
The <select> tag is used when you would like to give permission the user to select one option from multiple choices. By default it allows only one selection but use “multiple” parameter shows more than one options at once.
- Use <select> tag for list options with which the user is familiar.
The following example shows select type:
<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>
</form> - Use multiple=”multiple” parameter to allow the user to select more than one option.
The following example shows select type with multiple parameter:
<form role="form">
<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>
Static control
This class .form-control-static use on a <p> tag, whenever you require showing plain or simple text very next to a label within the horizontal form.
<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>
Form Control States
Bootstrap is also offering different classes for form validation and styling for disabled inputs. Just like in the adding the :focus state i.e. when user clicks into the input or tabs then its works.
Input focus
When :focus event active on input then drop shadow applied on that and removed border/outline of input. Below mentioned example will show that how to work this.
<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>
</form>
Disabled inputs
If you want to apply disable state in input type there is a very simple way for this. Add the attribute of disabled, this attribute will not only apply disable property even it will also change the background color, text color and also change the cursor of mouse when it hovers over that input type. Following example shows that how this state will work on form controls.
<form class="form-horizontal" role="form">
<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>
</form>
Disabled fieldsets
If you add this attribute of disabled on the <fieldset> tag, this will disable all the form controls which you will add within the <fieldset> right away.
<form class="form-horizontal" role="form">
<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>
</form>
Validation states
Bootstrap is also giving styles of alerts like warnings, success message and errors etc. there are some pre-defined classes in Bootstrap which will simply add like “.has-warning, .has-error, .has-success” to the main element. This code will show you all the states of alerts.
<form class="form-horizontal" role="form">
<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>
Form Control Sizing
Sizes of controls are 100% by default but you can give the heights and widths as per your requirements using these classes “.input-lg” and “.col-lg-*”. Following examples can be helpful for you.
<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>
Help Text
Help text is also be used to guide the user to give some instructions regarding that input. Bootstrap contains a block level help text which flows with the input types. Simply add block content with full width and use the “.help-block” class after the <input> tag. Following example demonstrates that.
<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>
Bootstrap Forms
No comments:
Post a Comment