Show Output
<!DOCTYPE html> <html lang="en"> <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 Supported 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{ margin: 30px 0; padding: 0 200px 15px 0; border-bottom: 1px solid #E5E5E5; } .bs-example{ margin: 20px; } </style> </head> <body> <div class="bs-example"> <h1>Registration Form</h1> <form class="form-horizontal" action="/examples/actions/confirmation.php" method="post"> <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" required> </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" required> </div> </div> <div class="form-group"> <label class="control-label col-xs-3" for="inputEmail">Email Address:</label> <div class="col-xs-9"> <input type="email" class="form-control" id="inputEmail" placeholder="Email Address" required> </div> </div> <div class="form-group"> <label class="control-label col-xs-3" for="phoneNumber">Phone Number:</label> <div class="col-xs-9"> <input type="tel" class="form-control" id="phoneNumber" placeholder="Phone Number" required> </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">Postal Address:</label> <div class="col-xs-9"> <textarea rows="3" class="form-control" id="postalAddress" placeholder="Postal Address" required></textarea> </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" required> </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" required> Male </label> </div> <div class="col-xs-2"> <label class="radio-inline"> <input type="radio" name="genderRadios" value="female" required> 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>
