Bootstrap Tutorial - Bootstrap Forms

In this tutorial we will learn how to create elegant forms with Bootstrap.

Bootstrap provides three different types of form layouts:

Vertical Form (default form layout)
Horizontal Form
Inline Form

Vertical Form Layout

The form controls in Vertical Form Layout are stacked with left-aligned labels on the top.

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script> 
<style type="text/css">
    .bs-example{<!-- w  w w. ja va2 s . co m-->
      margin: 20px;
    }
</style>
</head>
<body>
<div class="bs-example">
    <form>
        <div class="form-group">
            <label for="inputEmail">Email</label>
            <input type="email" class="form-control" id="inputEmail" placeholder="Email">
        </div>
        <div class="form-group">
            <label for="inputPassword">Password</label>
            <input type="password" class="form-control" id="inputPassword" placeholder="Password">
        </div>
        <div class="checkbox">
            <label><input type="checkbox"> Remember me</label>
        </div>
        <button type="submit" class="btn btn-primary">Login</button>
    </form>
</div>
</body>
</html>

Click to view the demo

Bootstrap will set textual elements like <input>, <textarea>, and <select> with the class .form-control to have 100% wide by default.

For each label and input field, we require a form-group classed div element.

Attaching the class form-control to an input element will make it a full-width element.

Example

Let's create an input field that will ask our visitors their name:

<!DOCTYPE html>
<html lang="en">
<head>
<script type='text/javascript'
  src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script
  src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
  src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!--from   ww w .java  2s .c o  m-->
    $('.myDropdownHandle').dropdown('toggle');
});
</script>  
</head>
  <body style='margin:30px'>
    <form  class="form">
    <div class="form-group">
        <label  for="nameField">Name</label>
        <input  type="text" 
                class="form-control" 
                id="nameField" 
                placeholder="Your Name"/>
    </div>
    </form>
  </body>
</html>

Click to view the demo

Form with Buttons

Let's fill the form with email, phone number, and textarea fields and, finally, a submit button.

<!DOCTYPE html>
<html lang="en">
<head>
<script type='text/javascript'
  src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script
  src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
  src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!--  w  w w  .jav  a2 s  . c om-->
    $('.myDropdownHandle').dropdown('toggle');
});
</script>  
</head>
  <body style='margin:30px'>
    <form  class="form">
        <div class="form-group">
            <label  for="nameField">Name</label>
            <input  type="text" class="form-control" id="nameField" placeholder="Your Name"  />
        </div>
        <div class="form-group">
            <label  for="emailField">Email</label>
            <input  type="email" class="form-control" id="emailField" placeholder="Your Email"  />
        </div>
        <div class="form-group">
            <label  for="phoneField">Phone</label>
            <input  type="text" class="form-control" id="phoneField" placeholder="Your Phone  Number" />
        </div>
        <div class="form-group">
            <label  for="descField">Description</label>
            <textarea class="form-control" id="descField" placeholder=" Your Comments"></textarea>
        </div>
        <button type="submit" class="btn btn-primary">Submit</button>
        <button type="reset" class="btn btn-default">Reset</button>
    </form>
  </body>
</html>

Click to view the demo

Horizontal Forms

In horizontal form layout, labels are right aligned and floated to left to make them appear on the same line as form controls.

We need the class .form-horizontal in the <form> element.

Wrap labels and form controls in a <div> element and apply the class .form-group.

Use Bootstrap's grid classes to align labels and form controls.

Add the class .control-label to the <label> element.

<!DOCTYPE html>
<html lang="en">
<head>
<script type='text/javascript'
  src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script
  src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
  src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!--from  w w w .java 2 s . c  om-->
    $('.myDropdownHandle').dropdown('toggle');
});
</script>  
</head>
  <body style='margin:30px'>
    <form  class="form-horizontal">
        <div class="form-group">
            <label  for="nameField" class="col-xs-2">Name</label>
            <div class="col-xs-10">
                <input  type="text" class="form-control" id="nameField" placeholder="Your Name"  />
            </div>
        </div>
        <div class="form-group">
            <label  for="emailField" class="col-xs-2">Email</label>
            <div class="col-xs-10">
                <input  type="email" class="form-control" id="emailField" placeholder="Your Email"  />
            </div>
        </div>
        <div class="form-group">
            <label  for="phoneField" class="col-xs-2">Phone</label>
            <div class="col-xs-10">
                <input  type="text" class="form-control" id="phoneField" placeholder="Your Phone  Number" />
            </div>
        </div>
        <div class="form-group">
            <label  for="descField" class="col-xs-2">Description</label>
            <div class="col-xs-10">
                <textarea class="form-control" id="descField" placeholder="Your Comments"></textarea>
            </div>
        </div>
        <div class="col-xs-10 col-xs-offset-2">
            <button type="submit" class="btn btn-primary">Submit </button> 
            <button type="reset" class="btn btn-default">Reset</button>
        </div>
    </form>
  </body>
</html>

Click to view the demo

Inline Form

We can create forms whose elements are present in a single line.

We use form-inline to make the form elements inline.

The markup for an inline form is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
<script type='text/javascript'
  src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script
  src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
  src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!--from w w w.j a  va  2s  . co m-->
    $('.myDropdownHandle').dropdown('toggle');
});
</script>  
</head>
  <body style='margin:30px'>
    <div class="well well-sm">
        <form  class="form-inline">
            <div class="form-group">
                <input  type="email" class="form-control" id="emailField" placeholder="Enter email">
            </div>
            <div class="form-group">
                <input  type="password" class="form-control" id="passwordField" placeholder="Password">
            </div>
            <div class="checkbox">
                <label><input  type="checkbox"> Remember me</label>
            </div>
            <button type="submit" class="btn btn-primary">Sign in</button>
        </form>
    </div>
  </body>
</html>

Click to view the demo