Bootstrap Form (Part 1)

FORM LAYOUT:

Bootstrap form provides you with following types of form layouts:

  • Vertical (default) form
  • Inline form
  • Horizontal form

BASIC FORM:

The basic form structure comes with Bootstrap; individual form controls automatically receive some global styling. To create a basic form do the following:

  • Add a role form to the parent <form> element.
  • Wrap labels and controls in a <div> with class .form-group. This is needed for optimum spacing.
  • Add a class of .form-control to all textual <input>, <textarea>, and <select> elements.
<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="bootstrap@*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
    <link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <form role="form">
   <div class="form-group">
      <label for="name">Enter Your Name</label>
      <input type="text" class="form-control" id="name" 
         placeholder="Enter Name">
   </div>
   <div class="form-group">
      <label for="inputfile">File input</label>
     <input type="file" id="inputfile">
      <p class="help-block">Example: 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>
  </body>

</html>

bootstrap form

As we can see in the above example we have used many features of form.At the top we can see that we have used a form-group class to hold a couple of label and textbox.As in the later form-group class we have included a label and with that a file input tag.

 <input type="file" id="inputfile">

After this we also have included a help-block class which is necessary to make certain forms user friendly.

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

Next in the div class we also have a class called checkbox. Which in turns includes a checkbox. And last but not the least we have a submit button to top it off.

We have a basic form in the above example. But why stop there? Let us improve this form a bit with Horizontal form. Let us discuss about it in the below.

BOOTSTRAP form-horizontal CLASS:

Horizontal forms stands apart from the others not only in the amount of markup, but also in the presentation of the form. To create a form that uses the horizontal layout, do the following:

  • Add a class of .form-horizontal to the parent <form> element.
  • Wrap labels and controls in a <div> with class .form-group.
  • Add a class of .control-label to the labels.

Let us see the changes we made.

  <form class="form-horizontal" role="form">
       <div class="form-group">
      <label for="name" class="col-sm-2 control-label">First Name</label>
      <input type="text" class="col-sm-2 control-form" id="name" 
         placeholder="Enter First Name">
       </div>
       <div class="form-group">
         <label for="name" class="col-sm-2 control-label">Last Name</label>
      <input type="text" class="col-sm-2 control-form" id="name" 
         placeholder="Enter Last Name">
   </div>
</form>
   <form>
   <div class="form-group">
      <label for="inputfile">File input</label>
     <input type="file" id="inputfile">
      <p class="help-block">Example: 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>

boot-hor-form

As we can see we are using two different forms here. One included with form-horizontal class. And a normal form. We can see in the image that the one which is using form-horizontal maintains a certain markup. But the other form allign itself with the window.

In the above article we have seen how to use forms in bootstrap. But bootstrap offers us more than this in forms. So, in next article we are going to discuss about the form controls.

If you find this article helpful, you can connect us in Google+ and Twitter.

Enter your email address: Delivered by FeedBurner

1 thought on “Bootstrap Form (Part 1)

Leave a Reply

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