<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"> <h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2> <form class="form-horizontal"> <fieldset> <!-- Form Name --> <legend>River Use Monthly Report</legend> <!-- Button Drop Down --> <div class="control-group"> <label class="control-label" for="btnddCompany">Company</label> <div class="controls"> <div class="input-append"> <input id="btnddCompany" name="btnddCompany" class="input-xlarge" placeholder="TBL: CO_TBL FLD: CO_NAME" type="text" required=""> <div class="btn-group"> <button class="btn dropdown-toggle" data-toggle="dropdown"> Select One <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a href="#">Action Whitewater Adventures</a></li> <li><a href="#">Adventure Connections</a></li> <li><a href="#">All Outdoors Inc.</a></li> </ul> </div> </div> </div> </div> <!-- Multiple Checkboxes (inline) --> <div class="control-group"> <label class="control-label" for="checkboxes"></label> <div class="controls"> <label class="checkbox inline" for="checkboxes-0"> <input type="checkbox" name="checkboxes" id="checkboxes-0" value="No Use"> No Use </label> </div> </div> <!-- Multiple Radios (inline) --> <div class="control-group"> <label class="control-label" for="radRivUse">River Use Type</label> <div class="controls"> <label class="radio inline" for="radRivUse-0"> <input type="radio" name="radRivUse" id="radRivUse-0" value="Paying" checked="checked"> Paying </label> <label class="radio inline" for="radRivUse-1"> <input type="radio" name="radRivUse" id="radRivUse-1" value="Non-Paying"> Non-Paying </label> </div> </div> <!-- Text input--> <div class="control-group"> <label class="control-label" for="txtPayGuests">Guests</label> <div class="controls"> <input id="txtPayGuests" name="txtPayGuests" type="text" placeholder="TBL: USE_DETAIL FLD: GUESTS_PAID" class="input-xlarge"> </div> </div> <!-- Text input--> <div class="control-group"> <label class="control-label" for="txtPayRafts">Rafts</label> <div class="controls"> <input id="txtPayRafts" name="txtPayRafts" type="text" placeholder="TBL: USE_DETAIL FLD: RAFTS_PAID" class="input-xlarge"> </div> </div> <!-- Text input--> <div class="control-group"> <label class="control-label" for="txtPayKayaks">Kayaks</label> <div class="controls"> <input id="txtPayKayaks" name="txtPayKayaks" type="text" placeholder="TBL: USE_DETAIL FLD: KAYAKS_PAID" class="input-xlarge"> </div> </div> <!-- Text input--> <div class="control-group"> <label class="control-label" for="txtNoPayGuides">Guides</label> <div class="controls"> <input id="txtNoPayGuides" name="txtNoPayGuides" type="text" placeholder="TBL: USE_DETAIL FLD: GUIDES" class="input-xlarge"> </div> </div> <!-- Text input--> <div class="control-group"> <label class="control-label" for="txtNoPayTrainees">Trainees</label> <div class="controls"> <input id="txtNoPayTrainees" name="txtNoPayTrainees" type="text" placeholder="TBL: USE_DETAIL FLD: TRAINEES" class="input-xlarge"> </div> </div> <!-- Text input--> <div class="control-group"> <label class="control-label" for="txtNoPayGuests">Guests</label> <div class="controls"> <input id="txtNoPayGuests" name="txtNoPayGuests" type="text" placeholder="TBL: CO_TBL FLD: GUESTS_FREE" class="input-xlarge"> </div> </div> <!-- Text input--> <div class="control-group"> <label class="control-label" for="txtNoPayRafts">Rafts</label> <div class="controls"> <input id="txtNoPayRafts" name="txtNoPayRafts" type="text" placeholder="TBL: USE_DETAIL FLD: RAFTS_FREE" class="input-xlarge"> </div> </div> <!-- Text input--> <div class="control-group"> <label class="control-label" for="txtNoPayKayaks">Kayaks</label> <div class="controls"> <input id="txtNoPayKayaks" name="txtNoPayKayaks" type="text" placeholder="TBL: USE_DETAIL FLD: KAYAKS_FREE" class="input-xlarge"> </div> </div> <!-- Select Basic --> <div class="control-group"> <label class="control-label" for="ddSitePutin">Site Put-In</label> <div class="controls"> <select id="ddSitePutin" name="ddSitePutin" class="input-xlarge"> <option>TBL: USE_DETAIL FLD: PUT_IN_ID LINK TO - TBL: POI FLD: POI_ID_USE return POI_NAME</option> <option>Chili Bar</option> <option>Salmon Falls</option> </select> </div> </div> <!-- Select Basic --> <div class="control-group"> <label class="control-label" for="selectbasic">Select Basic</label> <div class="controls"> <select id="selectbasic" name="selectbasic" class="input-xlarge"> <option>Option one</option> <option>Option two</option> </select> </div> </div> </fieldset> </form> </div> </div>