All Form Controls - HTML CSS Bootstrap

HTML CSS examples for Bootstrap:Form Control

  1. HOME
  2. HTML CSS
  3. Bootstrap
  4. Form Control

Description

All Form Controls

Demo Code

ResultView the demo in separate window 

<!DOCTYPE html>
<html>
 <head> 
  <meta charset="utf-8"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <title>Example of Bootstrap 3 All Form Controls</title> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <style type="text/css">
    h1{<!--from w ww  .j  a va  2s  .com-->
        margin: 30px 0;
        padding: 0 200px 15px 0;
        border-bottom: 1px solid #E5E5E5;
    }
  
</style> 
 </head> 
 <body> 
  <div> 
   <h1>Sign Up</h1> 
   <form class="form-horizontal"> 
    <div class="form-group"> 
     <label class="control-label col-xs-3" for="inputEmail">Email:</label> 
     <div class="col-xs-9"> 
      <input type="email" class="form-control" id="inputEmail" placeholder="Email"> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label class="control-label col-xs-3" for="inputPassword">Password:</label> 
     <div class="col-xs-9"> 
      <input type="password" class="form-control" id="inputPassword" placeholder="Password"> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label class="control-label col-xs-3" for="confirmPassword">Confirm Password:</label> 
     <div class="col-xs-9"> 
      <input type="password" class="form-control" id="confirmPassword" placeholder="Confirm Password"> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label class="control-label col-xs-3" for="firstName">First Name:</label> 
     <div class="col-xs-9"> 
      <input type="text" class="form-control" id="firstName" placeholder="First Name"> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label class="control-label col-xs-3" for="lastName">Last Name:</label> 
     <div class="col-xs-9"> 
      <input type="text" class="form-control" id="lastName" placeholder="Last Name"> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label class="control-label col-xs-3" for="phoneNumber">Phone:</label> 
     <div class="col-xs-9"> 
      <input type="tel" class="form-control" id="phoneNumber" placeholder="Phone Number"> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label class="control-label col-xs-3">Date of Birth:</label> 
     <div class="col-xs-3"> 
      <select class="form-control"> <option>Date</option> </select> 
     </div> 
     <div class="col-xs-3"> 
      <select class="form-control"> <option>Month</option> </select> 
     </div> 
     <div class="col-xs-3"> 
      <select class="form-control"> <option>Year</option> </select> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label class="control-label col-xs-3" for="postalAddress">Address:</label> 
     <div class="col-xs-9">
       &lt;textarea rows="3" class="form-control" id="postalAddress" placeholder="Postal Address"&gt;&lt;/textarea&gt; 
     </div> 
    </div> 
    <div class="form-group"> 
     <label class="control-label col-xs-3" for="ZipCode">Zip Code:</label> 
     <div class="col-xs-9"> 
      <input type="text" class="form-control" id="ZipCode" placeholder="Zip Code"> 
     </div> 
    </div> 
    <div class="form-group"> 
     <label class="control-label col-xs-3">Gender:</label> 
     <div class="col-xs-2"> 
      <label class="radio-inline"> <input type="radio" name="genderRadios" value="male"> Male </label> 
     </div> 
     <div class="col-xs-2"> 
      <label class="radio-inline"> <input type="radio" name="genderRadios" value="female"> Female </label> 
     </div> 
    </div> 
    <div class="form-group"> 
     <div class="col-xs-offset-3 col-xs-9"> 
      <label class="checkbox-inline"> <input type="checkbox" value="news"> Send me latest news and updates. </label> 
     </div> 
    </div> 
    <div class="form-group"> 
     <div class="col-xs-offset-3 col-xs-9"> 
      <label class="checkbox-inline"> <input type="checkbox" value="agree"> I agree to the <a href="#">Terms and Conditions</a>. </label> 
     </div> 
    </div> 
    <br> 
    <div class="form-group"> 
     <div class="col-xs-offset-3 col-xs-9"> 
      <input type="submit" class="btn btn-primary" value="Submit"> 
      <input type="reset" class="btn btn-default" value="Reset"> 
     </div> 
    </div> 
   </form> 
  </div>   
 </body>
</html>

Related Tutorials