I am developing a form on bootstrap, and I'd like to know if what am doing is best practice and a clean code or not.
Here's a form I'm working on, please help me make it "clean code".
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<style>
body {
fieldset{
margin: 20px 0 20px 0;
}
legend{
font-weight:bold;
}
div.row{
margin: auto 0px auto 0px;
}
.header{
background-color:#f7f7f7;
}
.borders, fieldset{
border: thin #f7f7f7 solid;
}
label{
color: #8A8A8A;
}
fieldset h5{
padding-left:15px;
font-weight:bold;
}
</style>
</head>
<body>
<header class="container-fluid">
<div class="row">
<div class="col-sm-8"></div>
<div class="col-sm-4">
<h1> Employment Request</h1>
<h4 class="sub-header">HR Department</h4>
</div>
</div>
</header>
<div class="container-fluid" id="container">
<div class="row">
<div class="col-sm-2">
<img src="logo.png" class="logo" />
</div>
</div>
<div class="row">
<p class="main-paragraph">is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<form>
<fieldset>
<legend>Date and availability</legend>
<div class="table-responsive">
<div class="form-group">
<table class="table">
<tr>
<th> <label for="txtTodaydate">Today's Date</label></th>
<th> <label for="txtDateavailable">Date available</label></th>
</tr>
<tr>
<td>
<input type="text" id="txtTodaydate" class="form-control" />
</td>
<td>
<input type="text" id="txtDateavailable" class="form-control" />
</td>
</tr>
</table>
</div>
</div>
<div class="row">
<h4>For each day, list the hours you are available to work</h4>
<div class="form-group">
<table class="table">
<tr>
<td class="col-sm-4">
<label for="txtMonday" class="control-label">Monday</label>
<input type="text" id="txtMonday" class="form-control" />
</td>
<td class="col-sm-4">
<label for="txtTuesday" class="control-label">Tuesday</label>
<input type="text" id="txtTuesday" class="form-control" />
</td>
<td class="col-sm-4">
<label for="txtWednesday" class="control-label">Wednesday</label>
<input type="text" id="txtWednesday" class="form-control" />
</td>
</tr>
<tr>
<td class="col-sm-4">
<label for="txtFriday" class="control-label">Friday</label>
<input type="text" id="txtFriday" class="form-control" />
</td>
<td class="col-sm-4">
<label for="txtSaturday" class="control-label">Saturday</label>
<input type="text" id="txtSaturday" class="form-control" />
</td>
<td class="col-sm-4">
<label for="txtSunday" class="control-label">Sunday</label>
<input type="text" id="txtSunday" class="form-control" />
</td>
</tr>
<tr>
<td class="col-sm-4">
<label for="txtThursday" class="control-label">Thursday</label>
<input type="text" id="txtThursday" class="form-control" />
</td>
</tr>
</table>
</div>
</div>
</fieldset>
<fieldset>
<legend>Personal Information</legend>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label for="txtName" class="control-label">Name:</label>
<input type="text" class="form-control" id="txtName" />
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label for="txtAddress" class="control-label">Address:</label>
<input type="text" class="form-control" id="txtAddress" />
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="txtHomePhone" class="control-label">Home Phone:</label>
<input type="text" class="form-control" id="txtHomePhone" />
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="txtPhone" class="control-label">Phone:</label>
<input type="text" class="form-control" id="txtPhone" />
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label for="txtEmail" class="control-label">Email:</label>
<input type="text" class="form-control" id="txtEmail" />
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label for="txtOtherName" class="control-label">For background checks, is there any other name that identifies you? If so, please state:</label>
<input type="text" class="form-control" id="txtOtherName" />
</div>
</div>
</div>
<div class="form-group">
<table>
<tr>
<td class="col-sm-4">
<label for="chckAge">Are you over the age of 18?</label>
<input type="checkbox" id="chckAge" class="checkbox" />
</td>
<td class="col-sm-4">
<label for="chckUS">Are you legally able to work in the US?</label>
<input type="checkbox" id="chckUS" class="checkbox" />
</td>
<td class="col-sm-4">
<label for="chckCrime">Have you even been convicted of a crime? If so, please provide details</label>
<input type="checkbox" id="chckCrime" class="checkbox" />
</td>
</tr>
</table>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<input class="form-control" type="text" id="txtJustification" placeholder="Click here to enter text" />
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend>Main Competency</legend>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="txtMathClass" class="control-label">What is the most recent math class you've taken, and what was your grade?</label>
<textarea id="txtMathClass" class="form-control" rows="4"></textarea>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="txtHighestMath" class="control-label">What is the highest math class you've taken for which you received a grade of A- or better?</label>
<textarea id="txtHighestMath" class="form-control" rows="4"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label for="txtOptional" class="control-label">
Option: Provide further explanation about
math competency, including participation in math clubs or competitions, math scores on the SAT or ACT, etc.
</label>
<textarea id="txtOptional" class="form-control" rows="4"></textarea>
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend>Complete for each high school and college/university or graduate school attended </legend>
<div class="form-group">
<div class="table-responsive">
<table class="table">
<tr>
<th>Name of school</th>
<th>Dates attended (Leave blank for high school)</th>
<th>Did you graduate? If so, list degree</th>
<th>Major, Minor & GPA</th>
</tr>
<tr>
<td><input type="text" id="txtSchool1" class="form-control"> </td>
<td><input type="text" id="txtDateAttended1" class="form-control"></td>
<td><input type="text" id="txtDidGraduate1" class="form-control"></td>
<td><input type="text" id="txtMajorMinor1" class="form-control"></td>
</tr>
<tr>
<td><input type="text" id="txtSchool2" class="form-control"> </td>
<td><input type="text" id="txtDateAttended2" class="form-control"></td>
<td><input type="text" id="txtDidGraduate2" class="form-control"></td>
<td><input type="text" id="txtMajorMinor2" class="form-control"></td>
</tr>
<tr>
<td><input type="text" id="txtSchool3" class="form-control"> </td>
<td><input type="text" id="txtDateAttended3" class="form-control"></td>
<td><input type="text" id="txtDidGraduate3" class="form-control"></td>
<td><input type="text" id="txtMajorMinor3" class="form-control"></td>
</tr>
<tr>
<td><input type="text" id="txtSchool4" class="form-control"> </td>
<td><input type="text" id="txtDateAttended4" class="form-control"></td>
<td><input type="text" id="txtDidGraduate4" class="form-control"></td>
<td><input type="text" id="txtMajorMinor4" class="form-control"></td>
</tr>
</table>
</div>
</div>
</fieldset>
<fieldset>
<legend>Employment or Volunteer Experience</legend>
<h5>Present/Most Recent Employer</h5>
<div class="row">
<div class="col-sm-4 borders">
<div class="form-group">
<label for="txtEmployerRecent" class="control-label">Employer</label>
<input type="text" id="txtEmployerRecent" class="form-control">
</div>
</div>
<div class="col-sm-2 borders">
<div class="form-group">
<label for="txtEmployerDateRecent" class="control-label" >Dates Employed</label >
<input type="text" id="txtEmployerDateRecent" class="form-control">
</div>
</div>
<div class="col-sm-6 borders">
<div class="form-group">
<label for="txtSupervisorRecent" class="control-label">Supervisor Title, Name, and Contact Info</label >
<textarea id="txtSupervisorTitleRecent" class="form-control" rows="2"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-8">
<div class="form-group">
<label for="txtRecentJobTitle" class="control-label">Job Title and Brief Description of Role</label>
<textarea rows="5" id="txtRecentJobTitle" class="form-control"></textarea>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="txtRecentReasonLeaving" class="control-label">Reason for Leaving</label>
<textarea rows="5" id="txtRecentReasonLeaving" class="form-control"></textarea>
</div>
</div>
</div>
<h5>Former Employer</h5>
<div class="row">
<div class="col-sm-4 borders">
<div class="form-group">
<label for="txtEmployer1" class="control-label">Employer</label>
<input type="text" id="txtEmployer1" class="form-control">
</div>
</div>
<div class="col-sm-2 borders">
<div class="form-group">
<label for="txtEmployerDate1" class="control-label" >Dates Employed</label >
<input type="text" id="txtEmployerDate1" class="form-control">
</div>
</div>
<div class="col-sm-6 borders">
<div class="form-group">
<label for="txtSupervisor1" class="control-label">Supervisor Title, Name, and Contact Info</label >
<textarea id="txtSupervisor1" class="form-control" rows="2"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-8">
<div class="form-group">
<label for="txtJobTitle1" class="control-label">Job Title and Brief Description of Role</label>
<textarea rows="5" id="txtJobTitle1" class="form-control"></textarea>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="txtReasonLeaving1" class="control-label">Reason for Leaving</label>
<textarea rows="5" id="txtReasonLeaving1" class="form-control"></textarea>
</div>
</div>
</div>
<h5>Former Employer</h5>
<div class="row">
<div class="col-sm-4 borders">
<div class="form-group">
<label for="txtEmployer2" class="control-label">Employer</label>
<input type="text" id="txtEmployer2" class="form-control">
</div>
</div>
<div class="col-sm-2 borders">
<div class="form-group">
<label for="txtEmployerDate2" class="control-label" >Dates Employed</label >
<input type="text" id="txtEmployerDate2" class="form-control">
</div>
</div>
<div class="col-sm-6 borders">
<div class="form-group">
<label for="txtSupervisor2" class="control-label">Supervisor Title, Name, and Contact Info</label >
<textarea id="txtSupervisor2" class="form-control" rows="2"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-8">
<div class="form-group">
<label for="txtJobTitle2" class="control-label">Job Title and Brief Description of Role</label>
<textarea rows="5" id="txtJobTitle2" class="form-control"></textarea>
</div>
</div>
<div class="col-sm-4">
<div class="form-group">
<label for="txtReasonLeaving2" class="control-label">Reason for Leaving</label>
<textarea rows="5" id="txtReasonLeaving2" class="form-control"></textarea>
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend>Additional Information</legend>
<div class="row">
<div class="col-sm-12">
<label for="txtAdditionalExperience" class="control-label">is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</label>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<textarea rows="5" id="txtAdditionalExperience" class="form-control"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<label for="txtWhyInterested" class="control-label">Why are you interested in applying for..</label>
<textarea rows="5" id="txtWhyInterested" class="form-control"></textarea>
</div>
</div>
</div>
</fieldset>
<fieldset>
<legend>References</legend>
<div class="row">
<div class="col-sm-12">
<label for="txtReferenceName1" class="control-label">List 3 proffessional references</label>
</div>
</div>
<div class="table-responsive">
<table class="table">
<tr>
<th>Name</th>
<th>Relationship</th>
<th>Phone</th>
<th>Email</th>
</tr>
<tr>
<td><input type="text" id="txtReferenceName1" class="form-control"> </td>
<td><input type="text" id="txtReferenceRelation1" class="form-control"></td>
<td><input type="text" id="txtReferencePhone1" class="form-control"></td>
<td><input type="text" id="txtReferenceEmail1" class="form-control"></td>
</tr>
<tr>
<td><input type="text" id="txtReferenceName2" class="form-control"> </td>
<td><input type="text" id="txtReferenceRelation2" class="form-control"></td>
<td><input type="text" id="txtReferencePhone2" class="form-control"></td>
<td><input type="text" id="txtReferenceEmail2" class="form-control"></td>
</tr>
<tr>
<td><input type="text" id="txtReferenceName2" class="form-control"> </td>
<td><input type="text" id="txtReferenceRelation3" class="form-control"></td>
<td><input type="text" id="txtReferencePhone3" class="form-control"></td>
<td><input type="text" id="txtReferenceEmail3" class="form-control"></td>
</tr>
</table>
</div>
</fieldset>
</form>
</div><!-- container-->
<footer class="container-fluid"></footer>
</body>
</html>
