Twitter Bootstrap Forms tutorial

Last update on August 19 2022 21:50:44 (UTC/GMT +8 hours)

Introduction

In this tutorial, you will learn how to create forms using Twitter Bootstrap toolkit Version 2.0.

Twitter Bootstrap has styles for form controls like input, textarea, and select, it has support for lists and checkbox, has styles for disabled form controls and has included states like the error, warning, and success for each form controls.

As of Version 2.0, Twitter Bootstrap provides you with four types of form layouts -

Vertical (which is the default form layout)
Search
Inline
Horizontal

In the previous version of Twitter Bootstrap Form Layouts, Horizontal layout was the default one. But not in version 2.0. Here, Vertical Layout is made the default.

Create a vertical Form layout

Style for the default Twitter Bootstrap Form layout (vertical form) resides against .form-vertical class of the bootstrap.css. But. since this is the default form layout, you don't need to specify .form-vertical class while creating a form with the default layout. The following example shows a form created with Twitter Bootstrap Version2.0 default form layout.

.well class is used to create the container of the forms (but it has another usage too). This class is found from line number 1650 to 1663 of bootstrap.css. For this layout, inputs are block level. Following example shows how to create a default form layout using Twitter Bootstrap.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Twitter Bootstrap Version2.0 default form layout example</title> 
<meta name="description" content="Twitter Bootstrap Version2.0 default form layout example from w3resource.com."> 
<link href="twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<form class="well">
  <label>Label name</label>
  <input type="text" class="span3" placeholder="Type something…">
  <span class="help-inline">Associated help text!</span>
  <label class="checkbox">
    <input type="checkbox"> Check me out
  </label>
  <button type="submit" class="btn">Submit</button>
</form>
</body>
</html>

View Online

View the above example in a different browser window.

Create a Search Form layout

Using .form-search class, which is located at line number 962 to 1003(these lines also contain style for .form-inline) of bootstrap.css, a search form can be created. For this layout, inputs are block level. Following is an example :

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Twitter Bootstrap Version2.0 search form layout example</title> 
<meta name="description" content="Twitter Bootstrap Version2.0 search form layout example from w3resource.com."> 
<link href="twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<form class="well form-search">
  <input type="text" class="input-medium search-query">
  <button type="submit" class="btn">Search</button>
</form>
</body>
</html>

View Online

View the above example in a different browser window.

Create an Inline Form layout

Using .form-inline class, which is located at line number 962 to 1003 (these lines also contain style for .form-search) of bootstrap.css, a search form can be created. For this layout, inputs are inline. Following is an example :

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Twitter Bootstrap Version2.0 inline form layout example</title> 
<meta name="description" content="Twitter Bootstrap Version2.0 inline form layout example from w3resource.com."> 
<link href="twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<form class="well form-inline">
  <input type="text" class="input-small" placeholder="Email">
  <input type="password" class="input-small" placeholder="Password">
  <label class="checkbox">
    <input type="checkbox"> Remember me
  </label>
  <button type="submit" class="btn">Sign in</button>
</form>
</body>
</html>

View Online

View the above example in a different browser window.

Create an Horizontal Form layout

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Twitter Bootstrap Version2.0 horizontal form layout example</title> 
<meta name="description" content="Twitter Bootstrap Version2.0 horizontal form layout example from w3resource.com."> 
<link href="twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<form class="form-horizontal">
        <fieldset>
          <legend>Controls Bootstrap supports</legend>
          <div class="control-group">
            <label class="control-label" for="input01">Text input</label>
            <div class="controls">
              <input type="text" class="input-xlarge" id="input01">
              <p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="optionsCheckbox">Checkbox</label>
            <div class="controls">
              <label class="checkbox">
                <input type="checkbox" id="optionsCheckbox" value="option1">
                Option one is this and that—be sure to include why it's great
              </label>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="select01">Select list</label>
            <div class="controls">
              <select id="select01">
                <option>something</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
              </select>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="multiSelect">Multicon-select</label>
            <div class="controls">
              <select multiple="multiple" id="multiSelect">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
              </select>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="fileInput">File input</label>
            <div class="controls">
              <input class="input-file" id="fileInput" type="file">
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="textarea">Textarea</label>
            <div class="controls">
              <textarea class="input-xlarge" id="textarea" rows="3"></textarea>
            </div>
          </div>
          <div class="form-actions">
            <button type="submit" class="btn btn-primary">Save changes</button>
            <button class="btn">Cancel</button>
          </div>
        </fieldset>
</form>
</body>
</html>

View Online

View the above example in a different browser window.

Browser States of Twitter Bootstrap Form controls

When an input field gets focus or if it is disabled or read-only, Twitter Bootstrap implies special styles for those. From line number 677 to 697 of bootstrap.css styles for focused input and textarea elements are specified.

Previously, Webkit "outline" was used as a value for ":focus", but now it has been changed to " box-shadow".

Here is an example showing a how styles are changed for a focused input, a read only input, a disabled input, a disabled checkbox and a disabled button.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Twitter Bootstrap Version2.0 horizontal form browser status example</title> 
<meta name="description" content="Twitter Bootstrap Version2.0 horizontal form browser status example from w3resource.com."> 
<link href="twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<form class="form-horizontal">
        <fieldset>
          <legend>Controls Bootstrap supports</legend>
          <div class="control-group">
            <label class="control-label" for="input01">Focused Input</label>
            <div class="controls">
              <input type="text" class="input-xlarge" id="input01">
              <p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p>
            </div>
          </div>
          <div class="control-group">
            <label class="control-label" for="input01">Read only Input</label>
            <div class="controls">
              <input type="text" class="input-xlarge" id="input01" readonly="true">
              <p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p>
            </div>
          </div>
		  <div class="control-group">
            <label class="control-label" for="input01">Disabled Input</label>
            <div class="controls">
              <input type="text" class="input-xlarge" id="input01" disabled>
              <p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p>
            </div>
          </div>
		  <div class="control-group">
            <label class="control-label" for="optionsCheckbox" reado>Checkbox (disabled)</label>
            <div class="controls">
              <label class="checkbox">
                <input type="checkbox" id="optionsCheckbox" value="option1" disabled>
                Option one is this and that—be sure to include why it's great
              </label>
            </div>
          </div>
          <div class="form-actions">
            <button type="submit" class="btn btn-primary" disabled>Save changes (disabled button)</button>
            <button class="btn">Cancel</button>
          </div>
        </fieldset>
</form>
</body>
</html>

View Online

View the above example in a different browser window.

Styles for Form Validation

Twitter Bootstrap Version2.0 has styles for errors, warnings, and success while validating a form. This is a wonderful feature since it is always a requirement to apply different a style to show that the user has created an error while supplying data to a form, or to when you need to generate a warning or even notifying the user that they have successfully entered data.

Here is an example:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Twitter Bootstrap Version2.0 form error example</title> 
<meta name="description" content="Twitter Bootstrap Version2.0 form error example from w3resource.com."> 
<link href="twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<form class="form-horizontal">
        <fieldset>
          <legend>Form validation error, warning and success</legend>
          <div class="control-group error">
            <label class="control-label" for="inputError">Input with error</label>
            <div class="controls">
              <input type="text" id="inputError">
              <span class="help-inline">Please correct the error</span>
            </div>
          </div>
		  <div class="control-group warning">
            <label class="control-label" for="inputWarning">Input with warning</label>
            <div class="controls">
              <input type="text" id="inputWarning">
              <span class="help-inline">Something may have gone wrong</span>
            </div>
          </div>
		  <div class="control-group success">
            <label class="control-label" for="inputSuccess">Input with success</label>
            <div class="controls">
              <input type="text" id="inputSuccess">
              <span class="help-inline">Successfully entered</span>
            </div>
          </div>
		  <div class="control-group success">
            <label class="control-label" for="selectError">Select with success</label>
            <div class="controls">
              <select id="selectError">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
              </select>
              <span class="help-inline">Successfully selected</span>
            </div>
          </div>
        </fieldset>
</form>
</body>
</html>

View Online

View the above example in a different browser window.

You may download all the HTML, CSS, JS and image files used in our tutorials here.

Previous: Twitter Bootstrap Tables tutorial 3
Next: Twitter Bootstrap 3 Button Tutorial