Bootstrap Forms

tutorialspalace 21 July, 2014 No Comments

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>

<label for="exampleInputEmail1">Email address</label>

</div>

<label for="exampleInputPassword1">Password</label>

</div>

<label for="exampleInputFile">File input</label>

<p class="help-block">Example block-level help text here.</p>

</div>

<label><input type="checkbox"> Check me out</label>

</div>

<button type="submit" class="btn btn-default">Submit</button>

</form>

Demo

Inline form

For making all elements of form in one row or inline add this class “.form-inline” in the

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>

<label class="sr-only" for="exampleInputEmail2">Email address</label>

</div>

<label class="sr-only" for="exampleInputPassword2">Password</label>

</div>

<label><input type="checkbox"> Remember me</label>

</div>

</form>

Demo

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>

<label for="inputEmail3" class="col-sm-2 control-label">Email</label>

</div>

<label for="inputPassword3" class="col-sm-2 control-label">Password</label>

</div>

<label>

<input type="checkbox"> Remember me

</label>

</div>

</div>

</form>

Demo

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>

<label for="name">Label</label>

</div>

</form>

Demo

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>

</div>

</form>

Demo

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>

<label for="name">Example of Default Checkbox and radio button </label>

<label><input type="checkbox" value="">Option 1</label>

</div>

<label><input type="checkbox" value="">Option 2</label>

</div>

<label>

<input type="radio" name="optionsRadios" id="optionsRadios1"

value="option1" checked> Option 1

</label>

</div>

<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>

<label for="name">Example of Inline Checkbox and radio button </label>

<div>

<input type="checkbox" id="inlineCheckbox1" value="option1"> Option 1

</label>

<input type="checkbox" id="inlineCheckbox2" value="option2"> Option 2

</label>

<input type="checkbox" id="inlineCheckbox3" value="option3"> Option 3

</label>

<input type="radio" name="optionsRadiosinline" id="optionsRadios3"

value="option1" checked> Option 1

</label>

<input type="radio" name="optionsRadiosinline" id="optionsRadios4"

value="option2"> Option 2

</label>

</div>

Demo

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>
      </div>
</form>

<label for="name">Select list</label>

</select>

</div>

</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>

<label for="name">Mutiple Select list</label>

</select>

</div>

</form>

Demo

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>

<label class="col-sm-2 control-label">Email</label>

<p class="form-control-static">email@example.com</p>

</div>

<label for="inputPassword" class="col-sm-2 control-label">Password</label>

<input type="password" class="form-control" id="inputPassword"

placeholder="Password">

</div>

</form>

Demo

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>

<label class="col-sm-2 control-label">Focused</label>

<input class="form-control" id="focusedInput" type="text"

value="This is focused...">

</div>

</form>

Demo

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

</label>

<input class="form-control" id="disabledInput" type="text"

placeholder="Disabled input here..." disabled>

</div>

</form>

Demo

Disabled fieldsets

If you add this attribute of disabled on the

tag, this will disable all the form controls which you will add within the

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>

Disabled input (Fieldset disabled)

</label>

<input type="text" id="disabledTextInput" class="form-control"

placeholder="Disabled input">

</div>

Disabled select menu (Fieldset disabled)

</label>

<option>Disabled select</option>

</select>

</div>

</fieldset>

</form>

Demo

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>

Input with success

</label>

</div>

Input with warning

</label>

</div>

Input with error

</label>

</div>

</form>

Demo

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>

<input class="form-control input-lg" type="text"

placeholder=".input-lg">

</div>

</div>

<input class="form-control input-sm" type="text"

placeholder=".input-sm">

</div>

</div>

<option value="">.input-lg</option>

</select>

</div>

<option value="">Default select</option>

</select>

</div>

<option value="">.input-sm</option>

</select>

</div>

</div>

</div>

</div>

</form>

Demo

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>

<span>Example of Help Text</span>

<span class="help-block">A longer block of help text that

breaks onto a new line and may extend beyond one line.</span>

</form>

Demo

Tags:bootstrap, bootstrap form templates, bootstrap form validation, bootstrap forms, bootstrap forms controls, bootstrap tutorial, bootstrap tutorials

Your email address will not be published. Required fields are marked *

Name *

Email *

Website

Tutorials Palace

Bootstrap Forms

Form Layout

Vertical or Basic Form

Inline form

Horizontal form

Supported Form Controls

Inputs

Textarea

CheckBoxes and Radios

Selects

Static control

Form Control States

Input focus

Disabled inputs

Disabled fieldsets

Validation states

Form Control Sizing

Help Text

Leave a Reply

Form Layout

Vertical or Basic Form

Inline form

Horizontal form

Supported Form Controls

Inputs

Textarea

CheckBoxes and Radios

Selects

Static control

Form Control States

Input focus

Disabled inputs

Disabled fieldsets

Validation states

Form Control Sizing

Help Text

Related Posts

Leave a Reply