Friday 13 September 2013

Twitter Bootstrap 3: How to create a Registration form

Today we are going to see how to create a Basic Registration form using Twitter Bootstrap 3. If you don't have idea about Twitter Bootstrap. please read my previous post. We are going to create a registration form using HTML5 form elements and with the help of bootstrap CSS classes, we will make the registration form a responsive one.

HTML5 Code:

<!DOCTYPE html>
<html>
  <head>
    <title>
      New Registration
    </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->

    <!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->

  </head>
  <body>
    <div class="container" style="margin: 10px;">
      <div class="row"><h2>New Registration</h2>
  </div>

  <form role="form">
    <div class="form-group">
      <label for="firstname" class="col-md-2">
        First Name:
      </label>
      <div class="col-md-10">
        <input type="text" class="form-control" id="firstname" placeholder="Enter First Name">
      </div><br/><br/>
    </div>

    <div class="form-group">
      <label for="lastname" class="col-md-2">
        Last Name:
      </label>
      <div class="col-md-10">
        <input type="text" class="form-control" id="lastname" placeholder="Enter Last Name">
      </div><br/><br/>
    </div>

    <div class="form-group">
      <label for="emailaddress" class="col-md-2">
        Email address:
      </label>
      <div class="col-md-10">
        <input type="email" class="form-control" id="emailaddress" placeholder="Enter email address">
        <p class="help-block">
          Example: yourname@domain.com
        </p>
      </div><br/><br/>
    </div>

    <div class="form-group">
      <label for="password" class="col-md-2">
        Password:
      </label>
      <div class="col-md-10">
        <input type="password" class="form-control" id="password" placeholder="Enter Password">
        <p class="help-block">
          Min: 6 characters (Alphanumeric only)
        </p>
      </div><br/><br/>
    </div>

    <div class="form-group">
      <label for="sex" class="col-md-2">
        Sex:
      </label>
      <div class="col-md-10">
        <label class="radio">
          <input type="radio" name="sex" id="sex" value="male" checked>
          Male
        </label>
        <label class="radio">
          <input type="radio" name="sex" id="sex" value="female">
          Female
        </label>
      </div><br/><br/>
    </div>

    <div class="form-group">
      <label for="country" class="col-md-2">
        Country:
      </label>
      <div class="col-md-10">
        <select name="country" id="country" class="form-control">
          <option>--Please Select--</option>
          <option>India</option>
          <option>United States</option>
          <option>Canada</option>
          <option>United Kingdom</option>
          <option>Others</option>
        </select>
      </div><br/><br/><br/><br/>
    </div>

    <div class="form-group">
      <label for="uploadimage" class="col-md-2">
        Upload Image:
      </label>
      <div class="col-md-10">
        <input type="file" name="uploadimage" id="uploadimage">
        <p class="help-block">
          Allowed formats: jpeg, jpg, gif, png
        </p>
      </div><br/><br/>
    </div>

    <div class="checkbox">
      <div class="col-md-2">
      </div>
      <div class="col-md-10">
        <label>
          <input type="checkbox">Terms and Conditions</label>
      </div><br/><br/>
    </div>

    <div class="row">
      <div class="col-md-2">
      </div>
      <div class="col-md-10">
        <button type="submit" class="btn btn-info">
          Register
        </button>
      </div>
    </div>
  </form>
  </div>

  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="js/jquery.js"></script>

  <!-- Include all compiled plugins (below), or include individual files as needed -->
  <script src="js/bootstrap.min.js"></script>
  </body>
</html>

Explanation:

Twitter Bootstrap 3 includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout configuration, as well as powerful mixins for generating more semantic layouts.
Following are the bootstrap classes that used in the above HTML5 code
Container: It is used to group html elements in the web page
help-block: It is used to provide block level help text for form controls
form-group:  It is used to group different form controls like <label>, <input>, <select> etc with optimum spacing between them.
Row:  It is similar to the table <tr> tag. start a new row
cols-xs-*: It applies to the device width (<768px) for mobile phone
cols-sm-*: It applies to the device width (≥768px) for tablets
cols-md-*: It applies to the device width (≥992px) for desktops
cols-lg-*: It applies to the device width (≥1200px) for large device desktops

In above HTML5 code, i used the following HTML5 elements <form>, <input>, <select> and <button> and their corresponding attributes based on element type (text, checkbox, radio). Each row in the HTML form is wrapped inside <div> with class name 'form-group'.

In each row,  20% (cols-md-2) of the screen width is allocated for label and remaining 80% (cols-md-10) is allocated for the HTML5 element. (12 columns grid is equals to the maximum device width).

For  more detailed information, please visit the Bootstrap form official documentation page.

Following is the output, when I run the above code in Internet Explorer 9.



Hope, you enjoyed this Post.

5 comments:

  1. Please!Can you supply the form execution codes (back end php codes)

    ReplyDelete
  2. Why do you need him to code the backend... geez..

    ReplyDelete
  3. Nice! I enjoyed the tutorial/explanation/guide. Thanks a lot

    ReplyDelete
  4. thanks man, this is really helpful

    ReplyDelete

Related Posts Plugin for WordPress, Blogger...