"Extra Form"
Bootstrap 3.3.0 Snippet by erickaston

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <div class="container"> <div class="row"> <div class="container"> <div class="row"> <form class="form-horizontal"> <fieldset> <!-- Form Name --> <legend>Form Name</legend> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="ref-num">Reference #</label> <div class="col-md-4"> <input id="ref-num" name="ref-num" 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="first-name">First Name</label> <div class="col-md-4"> <input id="first-name" name="first-name" 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="last-name">Last Name</label> <div class="col-md-4"> <input id="last-name" name="last-name" 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="date">Date</label> <div class="col-md-4"> <input id="date" name="date" 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="phone">Phone</label> <div class="col-md-4"> <input id="phone" name="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="address">Address</label> <div class="col-md-4"> <input id="address" name="address" 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="unit">Unit</label> <div class="col-md-4"> <input id="unit" name="unit" type="text" placeholder="" class="form-control input-md"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="city">City</label> <div class="col-md-4"> <input id="city" name="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="postal">Postal Code</label> <div class="col-md-4"> <input id="postal" name="postal" 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="email">Email</label> <div class="col-md-4"> <input id="email" name="email" type="text" placeholder="" class="form-control input-md" required=""> </div> </div> <!-- Multiple Radios (inline) --> <div class="form-group"> <label class="col-md-4 control-label" for="car">Do you own your own car?</label> <div class="col-md-4"> <label class="radio-inline" for="car-0"> <input type="radio" name="car" id="car-0" value="Yes" checked="checked"> Yes </label> <label class="radio-inline" for="car-1"> <input type="radio" name="car" id="car-1" value="No"> No </label> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="wage">Expected Wage</label> <div class="col-md-4"> <input id="wage" name="wage" type="text" placeholder="$" class="form-control input-md"> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="desired-work-term">Desired Work Term</label> <div class="col-md-4"> <select id="desired-work-term" name="desired-work-term" class="form-control"> <option value="Long">Long Term</option> <option value="Short">Short Term</option> <option value="Temp">Temp</option> <option value="Temp-to-Perm">Temp to Permanent</option> </select> </div> </div> <!-- Multiple Checkboxes --> <div class="form-group"> <label class="col-md-4 control-label" for="shifts">What shifts can you work?</label> <div class="col-md-4"> <div class="checkbox"> <label for="shifts-0"> <input type="checkbox" name="shifts" id="shifts-0" value="Days"> Days </label> </div> <div class="checkbox"> <label for="shifts-1"> <input type="checkbox" name="shifts" id="shifts-1" value="Afternoons"> Afternoons </label> </div> <div class="checkbox"> <label for="shifts-2"> <input type="checkbox" name="shifts" id="shifts-2" value="Nights"> Nights </label> </div> </div> </div> <!-- Multiple Radios (inline) --> <div class="form-group"> <label class="col-md-4 control-label" for="weekends">Can you work weekends?</label> <div class="col-md-4"> <label class="radio-inline" for="weekends-0"> <input type="radio" name="weekends" id="weekends-0" value="Yes" checked="checked"> Yes </label> <label class="radio-inline" for="weekends-1"> <input type="radio" name="weekends" id="weekends-1" value="No"> No </label> </div> </div> <!-- Multiple Radios (inline) --> <div class="form-group"> <label class="col-md-4 control-label" for="overtime">Can you work overtime?</label> <div class="col-md-4"> <label class="radio-inline" for="overtime-0"> <input type="radio" name="overtime" id="overtime-0" value="Yes" checked="checked"> Yes </label> <label class="radio-inline" for="overtime-1"> <input type="radio" name="overtime" id="overtime-1" value="No"> No </label> </div> </div> <!-- Multiple Checkboxes --> <div class="form-group"> <label class="col-md-4 control-label" for="experienced-in">Please check areas you are experienced in: </label> <div class="col-md-4"> <div class="checkbox"> <label for="experienced-in-0"> <input type="checkbox" name="experienced-in" id="experienced-in-0" value="Warehouse"> Warehouse </label> </div> <div class="checkbox"> <label for="experienced-in-1"> <input type="checkbox" name="experienced-in" id="experienced-in-1" value="Forklift"> Forklift </label> </div> <div class="checkbox"> <label for="experienced-in-2"> <input type="checkbox" name="experienced-in" id="experienced-in-2" value="Assembly"> Assembly </label> </div> <div class="checkbox"> <label for="experienced-in-3"> <input type="checkbox" name="experienced-in" id="experienced-in-3" value="Order-Picking"> Order Picking </label> </div> <div class="checkbox"> <label for="experienced-in-4"> <input type="checkbox" name="experienced-in" id="experienced-in-4" value="Machine-Operation"> Machine Operation </label> </div> <div class="checkbox"> <label for="experienced-in-5"> <input type="checkbox" name="experienced-in" id="experienced-in-5" value="Sewing"> Sewing </label> </div> <div class="checkbox"> <label for="experienced-in-6"> <input type="checkbox" name="experienced-in" id="experienced-in-6" value="Ship-Rec"> Ship/Rec </label> </div> <div class="checkbox"> <label for="experienced-in-7"> <input type="checkbox" name="experienced-in" id="experienced-in-7" value="Inventory"> Inventory </label> </div> <div class="checkbox"> <label for="experienced-in-8"> <input type="checkbox" name="experienced-in" id="experienced-in-8" value="Heavy-Lifting"> Heavy Lifting </label> </div> <div class="checkbox"> <label for="experienced-in-9"> <input type="checkbox" name="experienced-in" id="experienced-in-9" value="Packing"> Packing </label> </div> <div class="checkbox"> <label for="experienced-in-10"> <input type="checkbox" name="experienced-in" id="experienced-in-10" value="Welding"> Welding </label> </div> <div class="checkbox"> <label for="experienced-in-11"> <input type="checkbox" name="experienced-in" id="experienced-in-11" value="Containers"> Containers </label> </div> </div> </div> <!-- Multiple Checkboxes --> <div class="form-group"> <label class="col-md-4 control-label" for="days-avail">Days Available</label> <div class="col-md-4"> <div class="checkbox"> <label for="days-avail-0"> <input type="checkbox" name="days-avail" id="days-avail-0" value="Mon"> Mon </label> </div> <div class="checkbox"> <label for="days-avail-1"> <input type="checkbox" name="days-avail" id="days-avail-1" value="Tue"> Tue </label> </div> <div class="checkbox"> <label for="days-avail-2"> <input type="checkbox" name="days-avail" id="days-avail-2" value="Wed"> Wed </label> </div> <div class="checkbox"> <label for="days-avail-3"> <input type="checkbox" name="days-avail" id="days-avail-3" value="Thu"> Thu </label> </div> <div class="checkbox"> <label for="days-avail-4"> <input type="checkbox" name="days-avail" id="days-avail-4" value="Fri"> Fri </label> </div> <div class="checkbox"> <label for="days-avail-5"> <input type="checkbox" name="days-avail" id="days-avail-5" value="Sat"> Sat </label> </div> <div class="checkbox"> <label for="days-avail-6"> <input type="checkbox" name="days-avail" id="days-avail-6" value="Sun"> Sun </label> </div> </div> </div> <!-- Textarea --> <div class="form-group"> <label class="col-md-4 control-label" for="where-did-you-hear-of-us">How did you learn of Extra Industrial Personnel?</label> <div class="col-md-4"> <textarea class="form-control" id="where-did-you-hear-of-us" name="where-did-you-hear-of-us"></textarea> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="present-last-employer-name">Name</label> <div class="col-md-4"> <input id="present-last-employer-name" name="present-last-employer-name" type="text" placeholder="" class="form-control input-md"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="present-last-employer-address">Address</label> <div class="col-md-4"> <input id="present-last-employer-address" name="present-last-employer-address" type="text" placeholder="" class="form-control input-md"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="present-last-employer-phone">Phone</label> <div class="col-md-4"> <input id="present-last-employer-phone" name="present-last-employer-phone" type="text" placeholder="" class="form-control input-md"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="present-last-employer-position">Position</label> <div class="col-md-4"> <input id="present-last-employer-position" name="present-last-employer-position" type="text" placeholder="" class="form-control input-md"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="present-last-employer-salary">Salary</label> <div class="col-md-4"> <input id="present-last-employer-salary" name="present-last-employer-salary" type="text" placeholder="$" class="form-control input-md"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="present-last-employer-start">Start</label> <div class="col-md-4"> <input id="present-last-employer-start" name="present-last-employer-start" type="text" placeholder="month / year" class="form-control input-md"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="present-last-employer-end">End</label> <div class="col-md-4"> <input id="present-last-employer-end" name="present-last-employer-end" type="text" placeholder="month / year" class="form-control input-md"> </div> </div> <!-- Textarea --> <div class="form-group"> <label class="col-md-4 control-label" for="present-last-employer-leaving">Reason for Leaving</label> <div class="col-md-4"> <textarea class="form-control" id="present-last-employer-leaving" name="present-last-employer-leaving"></textarea> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="present-last-employer-supervisor">Supervisor Name</label> <div class="col-md-4"> <input id="present-last-employer-supervisor" name="present-last-employer-supervisor" type="text" placeholder="" class="form-control input-md"> </div> </div> <!-- File Button --> <div class="form-group"> <label class="col-md-4 control-label" for="filebutton">File Button</label> <div class="col-md-4"> <input id="filebutton" name="filebutton" class="input-file" type="file"> </div> </div> <!-- Button --> <div class="form-group"> <label class="col-md-4 control-label" for="submit">Submit</label> <div class="col-md-4"> <button id="submit" name="submit" class="btn btn-default">Button</button> </div> </div> </fieldset> </form> </div> </div> </div> </div>

Related: See More


Questions / Comments: