<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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>Apply For Moola Now!</legend> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="TxtFname">Name</label> <div class="col-md-5"> <input id="TxtFname" name="TxtFname" 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="TxtLname">Surname</label> <div class="col-md-5"> <input id="TxtLname" name="TxtLname" 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="TxtIDNo">ID Number</label> <div class="col-md-5"> <input id="TxtIDNo" name="TxtIDNo" type="text" placeholder="" class="form-control input-md" required=""> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="selectbasic">Select Basic</label> <div class="col-md-5"> <select id="selectbasic" name="selectbasic" class="form-control"> <option value="1">English</option> <option value="2">Afrikaans</option> </select> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="DdlHomeStatus">Home Status</label> <div class="col-md-5"> <select id="DdlHomeStatus" name="DdlHomeStatus" class="form-control"> <option value="1">Renting</option> <option value="2">Owner</option> </select> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="DdlMarStatus">Marital Status</label> <div class="col-md-5"> <select id="DdlMarStatus" name="DdlMarStatus" class="form-control"> <option value="1">Single</option> <option value="2">Married</option> </select> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="TxtDependants">Dependants</label> <div class="col-md-2"> <input id="TxtDependants" name="TxtDependants" type="text" placeholder="0" class="form-control input-md"> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="DdlEmployment">Employment Status</label> <div class="col-md-5"> <select id="DdlEmployment" name="DdlEmployment" class="form-control"> <option value="1">Employed Full Time</option> <option value="2">Employed Part Time</option> </select> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="TxtEmpName">Employer Name</label> <div class="col-md-5"> <input id="TxtEmpName" name="TxtEmpName" type="text" placeholder="" class="form-control input-md"> </div> </div> <!-- Prepended text--> <div class="form-group"> <label class="col-md-4 control-label" for="TxtMonthlyIncome">Monthly Income</label> <div class="col-md-4"> <div class="input-group"> <span class="input-group-addon">R</span> <input id="TxtMonthlyIncome" name="TxtMonthlyIncome" class="form-control" placeholder="8000" type="text"> </div> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="DdlIndustry">Industry</label> <div class="col-md-5"> <select id="DdlIndustry" name="DdlIndustry" class="form-control"> <option value="1">Engineering</option> <option value="2">Financial Services</option> </select> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="DdlPosition">Position</label> <div class="col-md-5"> <select id="DdlPosition" name="DdlPosition" class="form-control"> <option value="1">Accountant</option> <option value="2">Engineer</option> </select> </div> </div> <!-- Appended Input--> <div class="form-group"> <label class="col-md-4 control-label" for="TxtEmpYears">Years Employed</label> <div class="col-md-4"> <div class="input-group"> <input id="TxtEmpYears" name="TxtEmpYears" class="form-control" placeholder="2" type="text"> <span class="input-group-addon">Years</span> </div> </div> </div> <!-- Appended Input--> <div class="form-group"> <label class="col-md-4 control-label" for="TxtMonthsEmpl">Months</label> <div class="col-md-4"> <div class="input-group"> <input id="TxtMonthsEmpl" name="TxtMonthsEmpl" class="form-control" placeholder="0" type="text"> <span class="input-group-addon">Months</span> </div> </div> </div> <!-- Select Basic --> <div class="form-group"> <label class="col-md-4 control-label" for="DdlIncomeFreq">Income Frequency</label> <div class="col-md-5"> <select id="DdlIncomeFreq" name="DdlIncomeFreq" class="form-control"> <option value="1">Monthly</option> <option value="2">Weekly</option> </select> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="TxtNextPayDate">Next Pay Date</label> <div class="col-md-5"> <input id="TxtNextPayDate" name="TxtNextPayDate" type="text" placeholder="" class="form-control input-md"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="TxtUniversity">University name</label> <div class="col-md-5"> <input id="TxtUniversity" name="TxtUniversity" type="text" placeholder="" class="form-control input-md"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="TxtArmedForces">Armed Forces Division</label> <div class="col-md-5"> <input id="TxtArmedForces" name="TxtArmedForces" type="text" placeholder="" class="form-control input-md"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="TxtTelW">Tel Work</label> <div class="col-md-5"> <input id="TxtTelW" name="TxtTelW" type="text" placeholder="" class="form-control input-md"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="TxtTelH">Tel Home</label> <div class="col-md-5"> <input id="TxtTelH" name="TxtTelH" type="text" placeholder="" class="form-control input-md"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="TxtTelC">Mobile</label> <div class="col-md-5"> <input id="TxtTelC" name="TxtTelC" type="text" placeholder="" class="form-control input-md"> </div> </div> <!-- Text input--> <div class="form-group"> <label class="col-md-4 control-label" for="TxtEmail">Email</label> <div class="col-md-5"> <input id="TxtEmail" name="TxtEmail" type="text" placeholder="" class="form-control input-md"> </div> </div> <!-- Multiple Checkboxes (inline) --> <div class="form-group"> <label class="col-md-4 control-label" for="TxtAcceptTerms"></label> <div class="col-md-4"> <label class="checkbox-inline" for="TxtAcceptTerms-0"> <input type="checkbox" name="TxtAcceptTerms" id="TxtAcceptTerms-0" value="1"> I Accept the Moola terms and conditions </label> <label class="checkbox-inline" for="TxtAcceptTerms-1"> <input type="checkbox" name="TxtAcceptTerms" id="TxtAcceptTerms-1" value="2"> Subscribe to our newsletter </label> </div> </div> <!-- Button --> <div class="form-group"> <label class="col-md-4 control-label" for="BtnSubmit"></label> <div class="col-md-4"> <button id="BtnSubmit" name="BtnSubmit" class="btn btn-primary">Apply</button> </div> </div> </fieldset> </form>