Bootstrap Forms

The HTML forms represent section of document which is required to collect some data from the site visitor. For example: name, email, credit card etc. The form contains interactive controls such as text fields, text area fields, checkboxes, radio buttons, submit buttons etc which are used to take information from the user. Styling these controls manually using CSS could be difficult process. The Bootstrap simplifies the styling of these form controls process.

Bootstrap provides three types of form layouts:

Vertical Form
Horizontal Form
Inline Form

Also read:

Bootstrap Typography

Bootstrap Grid System

Bootstrap CSS

Vertical Form Layout

The vertical form layout is also called as default form layout of Bootstrap. Since it is default form layout, we don’t need to specify .form-vertical class. We can add styles to form controls without specifying any base class to the <form> element. The basic form layout does not need any extra helper classes to get job done. Following is an example:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
   <link rel="stylesheet" type="text/css" href="myclass.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
   <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Vertical Form Layout Example</h2>
<form>
   <div class="form-group">
      <label>Name</label>
      <input type="text" class="form-control" placeholder="Enter Name">
   </div>
   <div class="form-group">
      <label>Email</label>
      <input type="text" class="form-control" placeholder="Enter Email Address">
   </div>
   <div class="form-group">
      <label>Password</label>
      <input type="password" class="form-control" placeholder="Enter Password">
   </div>
   <button type="submit" class="btn">Submit</button>
</form>
</div>
</body>
</html>

Above script explains about basic vertical form layout in Bootstrap. We wrap the form controls and labels inside the <div> with class .form-group. It is used to make space between form controls in a web page. The form controls are defined with left aligned labels on the top.

Run vertical form layout demo

Inline Form Layout

The inline form elements are left aligned with their labels i.e. the elements are placed side by side by using Bootstrap class .form-inline to the <form> element. To have label and input on the same line, we could make use of this inline form layout. This form layout can be used only when view ports are at least 768px wide. Following is an example:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
   <link rel="stylesheet" type="text/css" href="myclass.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
   <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Inline Form Layout Example</h2>
<form class="form-inline">
   <div class="form-group">
      <label class="sr-only">Name</label>
      <input type="text" class="form-control" placeholder="Enter Name">
   </div>
   <div class="form-group">
      <label class="sr-only">Email</label>
      <input type="text" class="form-control" placeholder="Enter Email Address">
   </div>
   <div class="form-group">
      <label class="sr-only">Password</label>
      <input type="password" class="form-control" placeholder="Enter Password">
   </div>
   <div class="checkbox">
      <label><input type="checkbox">Remember Me</label>
   </div>
   <button type="submit" class="btn btn-success">Login</button>
</form>
</div>
</body>
</html>

The above script defines form elements side by side by using .form-inline class. We are using the class .sr-only to hide labels used for screen readers. If we don’t use labels for every input element, the screen readers will have trouble with the form. So we can hide these labels by using .sr-only class.

Run inline form layout demo

Horizontal Form Layout

Horizontal form layout is used to group form elements in horizontal form in which labels are right aligned and floated to left by using Bootstrap class .form-horizontal to the <form> element. Following is an example:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
   <link rel="stylesheet" type="text/css" href="myclass.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
   <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Horizontal Form Layout Example</h2>
<form class="form-horizontal">
   <div class="form-group">
      <label class="col-sm-2 control-label">Name</label>
      <div class="col-sm-10">
      <input type="text" class="form-control" placeholder="Enter Name">
      </div>
   </div>
   <div class="form-group">
      <label class="col-sm-2 control-label">Email</label>
      <div class="col-sm-10">
      <input type="text" class="form-control" placeholder="Enter Email Address">
      </div>
   </div>
   <div class="form-group">
      <label class="col-sm-2 control-label">Password</label>
        <div class="col-sm-10">
      <input type="password" class="form-control" placeholder="Enter 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-success">Login</button>
      </div>
   </div>
</form>
</div>
</body>
</html>

Above script display the form elements horizontally by using the class .form-horizontal on the web page. The .control-label class is used to wrap form controls for proper alignment which is added to the <label> element.

Run horizontal form layout

Supported Controls

Bootstrap supports some common form controls such as input, textarea, checkbox, radio and select.

The input element is common text field where we will enter the important data. It has several input types for forms such as date, email, month, number, search, url, range etc. The Bootstrap provides .input-lg, .input-sm classes to create larger and smaller input types.
The textarea defines multi line text input control. It can contain unlimited number of characters and the size of the text area can be specified by columns and row attributes.
The checkboxes are list of options where user may select any number of choices, means user can select more than one option. The radio buttons are contains list of options that are mutually exclusive and user can select only one option in a radio button group. If we want to display both checkboxes and radio buttons on the same line, then we could make use of .checkbox-inline and .radio-inline classes.
The select is used to select options from the drop down list where each option is defined by option element. The select element must contain at least one option element. If we want to select more than one option, the use .multiple class.

Consider the following example with form controls:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
   <link rel="stylesheet" type="text/css" href="myclass.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
   <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Form Controls Example</h2>
<form>
   <h2>Input Types</h2>
   <div class="form-group">
      <label>Larger Input</label>
         <input type="text" class="form-control input-lg" placeholder="Enter Text">
    </div>
    <div class="form-group">
	   <label>Smaller Input</label>
	      <input type="text" class="form-control input-sm" placeholder="Enter Text">
    </div>

    <h2>Text Area</h2>
    <div class="form-group">
	      <textarea class="form-control" rows="3" placeholder="This is textarea"></textarea>
	</div>

	<h2>Default Checkbox and Radio buttons</h2>
	<div class="checkbox">
	   <label><input type="checkbox">Cricket</label>
    </div>
    <div class="checkbox">
	   <label><input type="checkbox">Football</label>
	</div>
    <div class="radio">
	   <label><input type="radio" name="myradio" value="option1" checked>First Option</label>
	</div>
	<div class="radio">
	   <label><input type="radio" name="myradio" value="option2">Second Option</label>
    </div>

    <h2>Inline Checkbox and Radio buttons</h2>
    <div class="checkbox-inline">
		<label><input type="checkbox">Cricket</label>
	</div>
	<div class="checkbox-inline">
		<label><input type="checkbox">Football</label>
	</div>
	<div class="radio-inline">
		<label><input type="radio" name="myradio1" value="option1" checked>First Option</label>
	</div>
	<div class="radio-inline">
		<label><input type="radio" name="myradio1" value="option2">Second Option</label>
	</div>
    <h2>Select Control Type</h2>
    <div class="form-group">
       <label>Select List</label>
          <select class="form-control">
             <option>myval 1</option>
			 <option>myval 2</option>
			 <option>myval 3</option>
			 <option>myval 4</option>
			 <option>myval 5</option>
          </select>
       <label>Select List</label>
	      <select multiple class="form-control">
	         <option>myval 1</option>
	   		 <option>myval 2</option>
	   		 <option>myval 3</option>
	   		 <option>myval 4</option>
	   		 <option>myval 5</option>
          </select>
   </div>
</form>
</body>
</html>

Run supported controls demo

Static Control

When we don’t want to change the value on a web page or to place plain text which cannot be changed or altered to a form label, then we use Bootstrap .form-control-static class. The following is an example:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
   <link rel="stylesheet" type="text/css" href="myclass.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
   <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Static Control Example</h2>
<form class="form-horizontal">
   <div class="form-group">
      <label>Name</label>
      <p class="form-control-static">Mahantesh</p>
   </div>
   <div class="form-group">
      <label>Email</label>
      <p class="form-control-static">mahantesh@gmail.com</p>
   </div>
   <div class="form-group">
      <label>Password</label>
      <input type="password" class="form-control" placeholder="Enter Password">
   </div>
   <button type="submit" class="btn">Submit</button>
</form>
</div>
</body>
</html>

Run static control demo

Form Control States

Input Focus
Bootstrap implies special styles for input fields when they get focused or disabled. When it receives :focus, then it applies box shadow in its place.
Disabled Inputs
We can disable the input by simply applying disabled attribute on an input and also makes input look slightly different.
Disabled Fieldsets
We can disable all controls which are under fieldset by using disabled attribute to <feildset>.
Validation States
Bootstrap provides different ways for styling input controls to different validation states. It includes styles for error, warning and success while validating a form.

Following is an example :

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
   <link rel="stylesheet" type="text/css" href="myclass.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
   <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Form Control States Example</h2>
   <div class="form-group">
      <label>Focused</label>
	        <input type="text" class="form-control" placeholder="This is focused...">
   </div>
   <div class="form-group">
   <label>Name</label>
         <input type="text" class="form-control" placeholder="It is disabled..." disabled>
   </div>
   <fieldset disabled>
   <div class="form-group">
         <label>Disabled Select Menu</label>
         <select class="form-control">
           <option>This is disabled select</option>
         </select>
    </div>
    </fieldset>
   <div class="form-group has-success">
       <label>Name</label>
       <input type="text" class="form-control" placeholder="Success!!!">
       <span class="help-block">Name is available</span>
   </div>
   <div class="form-group has-warning">
          <label>Password</label>
           <input type="password" class="form-control" placeholder="Warning!!!">
          <span class="help-block">Password is too weak</span>
   </div>
   <div class="form-group has-error">
          <label>Email</label>
          <input type="email" class="form-control" placeholder="Error!!!">
          <span class="help-block">Enter valid email address</span>
   </div>
</div>
</body>
</head>

Run Form Control States Demo

Help Text

It helps user to enter data correctly in a form. It contains block level help text with the inputs. We can add block level content by using .help-block class after the input element. Following is an example:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
   <link rel="stylesheet" type="text/css" href="myclass.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
   <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
   <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Help Text Example</h2>
   <form>
      <input type="text" class="form-control">
         <span class="help-block">Your name is not available!!!</span>
   </form>
</div>
</body>
</html>

Run help text demo