Hai everyone using this tutorial you can easily create responsive form using bootstrap. There are lot of twitter bootstrap responsive registration and contact form examples in internet but not found the exact one. So i decided to give correct example and you can also customize this form according to your requirements. I have studied and done this example according to latest version bootstrap, so please download the bootstrap version 3.1.1 because bootstrap has made lot of changes in this version.

Screenshot

Source Code

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css" />
<title>Responsive Registration Form</title>
</head>
<body>
<div class="panel panel-default">
 <div class="panel-heading">
  <h3 class="panel-title">New Registration Form</h3>
 </div>
  <div class="panel-body">
 <form class="form-horizontal" role="form">
  <div class="form-group">
    <label for="name" class="col-sm-2 control-label">Name</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="name"
       placeholder="Enter u r name here">
    </div>
  </div>
   <div class="form-group">
    <label for="gmail" class="col-sm-2 control-label">Gmail</label>
 <div class="col-sm-10">
   <div class="input-group input-group-sm">
     <span class="input-group-addon">@</span>
    <input type="text" class="form-control" placeholder="">
  </div>
  </div>
  </div>
    <div class="form-group">
    <label for="password" class="col-sm-2 control-label">Password</label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="pass">
    </div>
  </div>
    <div class="form-group">
    <label for="password" class="col-sm-2 control-label">Confirm your password
    </label>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="confirmpass">
    </div>
  </div>
<div class="form-group">
   <label class="col-sm-2 control-label">Gender</label>
   <div class="col-sm-10">
    <div class="radio-inline">
     <label>
      <input id="radiobutton1" name="sampleradiobutton" value="" type="radio">
      Male</label>
    </div>
    <div class="radio-inline">
     <label>
      <input id="radiobutton2" name="sampleradiobutton" value="" type="radio">
      Female</label>
    </div>
   </div>
  </div>
  <div class="form-group">
    <label for="State" class="col-sm-2 control-label">State</label>
    <div class="col-sm-10">
  <select class="form-control">
   <option>Andhra Pradesh</option>
   <option>Karnataka</option>
   <option>Kerala</option>
   <option>Tamilnadu</option>
  </select>
    </div>
  </div>
  <div class="form-group">
    <label for="Address" class="col-sm-2 control-label">Address</label>
    <div class="col-sm-10">
 <textarea name="" cols="" rows="" class="form-control"></textarea>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox">I accept terms and conditions
        </label>
      </div>
    </div>
  </div> 
</form>
  </div>
  <div class="panel-footer" style="overflow:hidden;text-align:right;">
    <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-success btn-sm">Submit</button>
      <button type="submit" class="btn btn-default btn-sm">Cancel</button>
    </div>
  </div>  
  </div>
</div>
</body>
</html>

2 comments:

 
Top