Thursday, 12 February 2015

FORM-BOOTSTRAP-3




<! DOCTYPE html>
<html>
<title>
RESPONSIVE WEB DESIGN WITH BOOTSTRAP
</title>
<head>
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<style>
</style>
</head>
<body>
<div class="container " >

 <div class="row">

  <div class="col-lg-2">
   <label >OUR FAKE ADDRESS </label>
   <address >
    <a href="mailto:ABC@gmail.com">SHARMAJI</a>.<br>
    <hr/>
    3/18 ABCDEF STREET<br>
    ABCEDEF,ABE<br>
    ABE--,ABC--<br>
    2216
    <hr/>
    Mobile: 0000000
   </address>
  </div>

  <form class="form-horizontal col-lg-8" >
   <div class="row">
    <h4 class="col-lg-8" style="text-align:center; font-weight:bold;">CONTACT US</h4><br>
    </hr>
   </div>
   <div class="row form-group">
    <label class="col-lg-2">First name:</label>
    <input type="text" name="firstname" class="col-lg-6">
   </div>
   <div class="row form-group">
    <label class="col-lg-2">Last name:</label>
    <input type="text" name="lastname" class="col-lg-6 ">
   </div>
   <div class="row form-group">
    <label class="col-lg-2">Gender:</label>
    <input type="radio" class="col-lg-1"><label class="col-lg-2">Male</label>
    <input type="radio" class="col-lg-1" ><label class="col-lg-2">Female</label>
   </div>
   <div class="row form-group">
    <label class="col-lg-2">Address</label>
    <input type="textarea" class="col-lg-6">
   </div>
   <div class="row form-group">
    <label class="col-lg-2">Interests</label>
    <select class="col-lg-6">
     <option>Software</option>
     <option>Hardware</option>
     <option>Networking</option>
    </select>
   </div>
   <div class="row form-group">
    <button class="col-lg-2 col-lg-offset-2 btn btn-success">Submit</button>
   </div>
  </form>

  <div class="col-lg-2">
   <label >OUR FAKE ADDRESS </label>
   <address >
    <a href="mailto:ABC@gmail.com">SHARMAJI</a>.<br>
    <hr/>
    3/18 ABCDEF STREET<br>
    ABCEDEF,ABE<br>
    ABE--,ABC--<br>
    2216
    <hr/>
    Mobile: 0000000
   </address>
  </div>

 </div>
</div>
</body>
</html>

MAIN IDEAS:

1) USE OF BOOTSTRAP-12 GRID COLUMN - ADDRESS- COLUMN-2 , FORM-COLUMN-8 AND ADDRESS -COL-2
2)WRAP CONTROLS IN ROW AND FORM-GROUP
3) USE LABEL-COL-2 AND INPUT -COL-6

OUTPUT: