"conference registration form"
Bootstrap 3.0.0 Snippet by tamaker

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <form class="form-horizontal"> <fieldset> <!-- Form Name --> <legend>TSC Conference Registration</legend> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="frm_title">Title</label> <div class="col-md-2"> <input id="frm_title" name="frm_title" type="text" placeholder="Mr., Mrs., Dr." class="form-control input-md" required=""> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="frm_fname">First Name</label> <div class="col-md-6"> <input id="frm_fname" name="frm_fname" type="text" placeholder="" class="form-control input-md" required=""> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="frm_lname">Last Name</label> <div class="col-md-6"> <input id="frm_lname" name="frm_lname" type="text" placeholder="" class="form-control input-md" required=""> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="frm_suffix">Suffix</label> <div class="col-md-2"> <input id="frm_suffix" name="frm_suffix" type="text" placeholder="" class="form-control input-md"> </div> </div> <!-- Multiple Radios --> <div class="form-group"> <label class="col-md-4 control-label" for="frm_registration_type">RegistrationType</label> <div class="col-md-4"> <div class="radio"> <label for="frm_registration_type-0"> <input type="radio" name="frm_registration_type" id="frm_registration_type-0" value="General" checked="checked"> General Registration </label> </div> <div class="radio"> <label for="frm_registration_type-1"> <input type="radio" name="frm_registration_type" id="frm_registration_type-1" value="Student"> Student Registration </label> </div> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="frm_address1">Address 1</label> <div class="col-md-6"> <input id="frm_address1" name="frm_address1" type="text" placeholder="" class="form-control input-md" required=""> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="frm_address2">Address 2</label> <div class="col-md-6"> <input id="frm_address2" name="frm_address2" type="text" placeholder="" class="form-control input-md" required=""> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="frm_city">City</label> <div class="col-md-6"> <input id="frm_city" name="frm_city" type="text" placeholder="" class="form-control input-md" required=""> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="frm_state">State/Province/Region</label> <div class="col-md-5"> <input id="frm_state" name="frm_state" type="text" placeholder="" class="form-control input-md" required=""> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="frm_zip">Zip (Postal Code)</label> <div class="col-md-2"> <input id="frm_zip" name="frm_zip" type="text" placeholder="" class="form-control input-md" required=""> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="frm_company">Company/Organization</label> <div class="col-md-6"> <input id="frm_company" name="frm_company" type="text" placeholder="" class="form-control input-md" required=""> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="frm_phone">Phone</label> <div class="col-md-4"> <input id="frm_phone" name="frm_phone" type="text" placeholder="" class="form-control input-md" required=""> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="frm_cellphone">Cell Phone</label> <div class="col-md-4"> <input id="frm_cellphone" name="frm_cellphone" type="text" placeholder="" class="form-control input-md"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="frm_email">Email</label> <div class="col-md-4"> <input id="frm_email" name="frm_email" type="text" placeholder="" class="form-control input-md" required=""> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="frm_confirm_email">Confirm Email</label> <div class="col-md-4"> <input id="frm_confirm_email" name="frm_confirm_email" type="text" placeholder="" class="form-control input-md" required=""> </div> </div> <!-- Textarea --> <div class="form-group"> <label class="col-md-4 control-label" for="frm_special_requests">Special Requests</label> <div class="col-md-4"> <textarea class="form-control" id="frm_special_requests" name="frm_special_requests"></textarea> </div> </div> <!-- Textarea --> <div class="form-group"> <label class="col-md-4 control-label" for="frm_special_dietary_restrictions">Special Requests</label> <div class="col-md-4"> <textarea class="form-control" id="frm_dietary_restrictions" name="frm_dietary_restrictions"></textarea> </div> </div> <!-- Textarea --> <div class="form-group"> <label class="col-md-4 control-label" for="frm_handicap_needs">Special Requests</label> <div class="col-md-4"> <textarea class="form-control" id="frm_handicap_needs" name="frm_handicap_needs"></textarea> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="frm_payment_type">Payment Type</label> <div class="col-md-4"> <select id="frm_payment_type" name="frm_payment_type" class="form-control"> <option value="Check">Check</option> <option value="Credit Card">Credit Card</option> </select> </div> </div> <!-- Text input--> <div class="form-group hiddenElement"> <label class="col-md-4 control-label" for="frm_confirm_email">Time Submitted</label> <div class="col-md-4"> <input id="frm_submitted_timestamp" name="frm_submitted_timestamp" type="text" placeholder="" class="form-control input-md" required=""> </div> </div> <!-- Button --> <div class="form-group"> <label class="col-md-4 control-label" for="frm_submit"></label> <div class="col-md-4"> <button id="frm_submit" name="frm_submit" class="btn btn-success">Submit Registration</button> </div> </div> </fieldset> </form>
.hiddenElement { border: 1px solid red; background-color: silver; }

Related: See More


Questions / Comments: