HTML forms not connecting as one - html

I have only one form group. A submit button will only enable if all the form inputs are valid. Yet the submit button already enables halfway through completion. When I try to declare another form tag with the same id, the other half works but the previous half don't. I don't know the proper position of form tags plus I use many tags because of the bootstrap grids.
<div class="row">
<div class="col-md-2">
</div>
<!--MAIN PANEL-->
<div class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">
<h1 class="pheading">Create</h1>
</div>
<div class="panel-body">
<div class="row">
</div>
<form name="formCreate" novalidate>
<!--NAME-->
<div class="row">
<div class="col-md-4">
<fieldset class="well">
<legend align="left">Name</legend>
<div class="row">
<div class="fields" align="middle">
<input type="text" class="form-control" name="name" placeholder="Enter name" ng-model="ctrl.person.name" ng-minlength="10" required ng-pattern="/^[a-zA-Z ]*$/">
</div>
</div>
</fieldset>
</div>
<!--BDAY-->
<div class="col-md-3">
<fieldset class="well">
<legend align="left">Birthday</legend>
<div class="fields" align="middle">
<input type="date" class="form-control" name="bday" ng-model="ctrl.person.birthday" required ng-date>
</div>
</fieldset>
</div>
<!--GENDER-->
<div class="col-md-2">
<fieldset class="well">
<legend align="left">Gender</legend>
<div class="row">
<div class="radios" align="middle">
<label class="radio-inline"><input type="radio" name="gender" value="Male" id="male" ng-model="ctrl.person.gender" required><span>Male</span></label>
<label class="radio-inline"><input type="radio" ng-model="ctrl.person.gender" name="gender" value="Female" id="female" required><span>Female</span></label>
</div>
</div>
</fieldset>
</div>
<!--MARITAL-->
<div class="col-md-3">
<fieldset class="well">
<legend align="left">Marital Status</legend>
<div class="row" align="middle">
<div class="fields" align="middle">
<div>
<select name="status" name="status" ng-model="ctrl.person.maritalStatus" required>
<option selected hidden>Select Status</option>
<option value="Single">Single</option>
<option value="Married">Married</option>
<option value="Divorced">Divorced</option>
<option value="Separated">Separated</option>
<option value="Widowed">Widowed</option>
</select>
</div>
</div>
</fieldset>
</div>
</div>
</div>
<div class="row">
<div class="col-md-1">
</div>
<!--ADDRESS-->
<div class="col-md-4">
<fieldset class="well">
<legend align="left">Address</legend>
<div class="fields" align="middle">
<textarea name="address" rows="3" cols="50" form="formCreate" placeholder="Enter address..." align="middle" ng-model="ctrl.person.address" required></textarea>
</div>
</fieldset>
</div>
<!--TEL-->
<div class="col-md-3">
<fieldset class="well">
<legend align="left">Telephone</legend>
<div class="row">
<div class="fields" align="middle">
<input type="text" class="form-control" name="telephone" placeholder="Enter telephone number" align="middle" ng-model="ctrl.person.telephoneNumber" required ng-pattern="/^[0-9]*$/">
</div>
</div>
</fieldset>
</div>
<!--EMAIL-->
<div class="col-md-3">
<fieldset class="well">
<legend align="left">Email</legend>
<div class="fields" align="middle">
<div class="fields" align="middle">
<input type="email" class="form-control" name="email" placeholder="Enter email" ng-model="ctrl.person.emailAddress" required ng-email>
</div>
</div>
</div>
</fieldset>
<div class="col-md-1">
</div>
</div>
</form>
<!--SUBMIT-->
<button ng-click="ctrl.submitPerson()" onClick="showModal()" class="btn btn-primary" id="sbtn" ng-disabled="formCreate.name.$invalid||formCreate.bday.$invalid||formCreate.gender.$invalid||formCreate.status.$invalid||formCreate.address.$invalid||formCreate.telephone.$invalid||formCreate.email.$invalid">Submit</button>
<!--MODAL-->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" id="close" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-5">
</div>
</div>
</div>
</div>
</div>
</div>


Do a code walkthrough and check for the following:
Check and remove unused tag
Place the end tags in proper place
This is a edited code, try this, hope it works!
<div class="row">
<div class="col-md-2">
</div>
<!--MAIN PANEL-->
<div class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">
<h1 class="pheading">Create</h1>
</div>
<div class="panel-body">
<form name="formCreate" novalidate>
<!--NAME-->
<div class="row">
<div class="col-md-4">
<fieldset class="well">
<legend align="left">Name</legend>
<div class="row">
<div class="fields" align="middle">
<input type="text" class="form-control" name="name" placeholder="Enter name" ng-model="ctrl.person.name" ng-minlength="10" required ng-pattern="/^[a-zA-Z ]*$/">
</div>
</div>
</fieldset>
</div>
<!--BDAY-->
<div class="col-md-3">
<fieldset class="well">
<legend align="left">Birthday</legend>
<div class="fields" align="middle">
<input type="date" class="form-control" name="bday" ng-model="ctrl.person.birthday" required ng-date>
</div>
</fieldset>
</div>
<!--GENDER-->
<div class="col-md-2">
<fieldset class="well">
<legend align="left">Gender</legend>
<div class="row">
<div class="radios" align="middle">
<label class="radio-inline"><input type="radio" name="gender" value="Male" id="male" ng-model="ctrl.person.gender" required><span>Male</span></label>
<label class="radio-inline"><input type="radio" ng-model="ctrl.person.gender" name="gender" value="Female" id="female" required><span>Female</span></label>
</div>
</div>
</fieldset>
</div>
<!--MARITAL-->
<div class="col-md-3">
<fieldset class="well">
<legend align="left">Marital Status</legend>
<div class="row" align="middle">
<div class="fields" align="middle">
<select name="status" name="status" ng-model="ctrl.person.maritalStatus" required>
<option selected hidden>Select Status</option>
<option value="Single">Single</option>
<option value="Married">Married</option>
<option value="Divorced">Divorced</option>
<option value="Separated">Separated</option>
<option value="Widowed">Widowed</option>
</select>
</div>
</div>
</fieldset>
</div>
</div>
</form>
</div>
<form name="formCreate" novalidate>
<div class="row">
<div class="col-md-1">
</div>
<!--ADDRESS-->
<div class="col-md-4">
<fieldset class="well">
<legend align="left">Address</legend>
<div class="fields" align="middle">
<textarea name="address" rows="3" cols="50" form="formCreate" placeholder="Enter address..." align="middle" ng-model="ctrl.person.address" required></textarea>
</div>
</fieldset>
</div>
<!--TEL-->
<div class="col-md-3">
<fieldset class="well">
<legend align="left">Telephone</legend>
<div class="row">
<div class="fields" align="middle">
<input type="text" class="form-control" name="telephone" placeholder="Enter telephone number" align="middle" ng-model="ctrl.person.telephoneNumber" required ng-pattern="/^[0-9]*$/">
</div>
</div>
</fieldset>
</div>
<!--EMAIL-->
<div class="col-md-3">
<fieldset class="well">
<legend align="left">Email</legend>
<div class="fields" align="middle">
<div class="fields" align="middle">
<input type="email" class="form-control"
name="email" placeholder="Enter email" ng-model="ctrl.person.emailAddress" required ng-email>
</div>
</div>
</fieldset>
</div>
<div class="col-md-1">
</div>
</div>
</form>
<!--SUBMIT-->
<button ng-click="ctrl.submitPerson()" onClick="showModal()" class="btn btn-primary" id="sbtn" ng-disabled="formCreate.name.$invalid||formCreate.bday.$invalid||formCreate.gender.$invalid||formCreate.status.$invalid||formCreate.address.$invalid||formCreate.telephone.$invalid||formCreate.email.$invalid">Submit</button>
<!--MODAL-->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" id="close" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>


The solution in my problem is simple. just contain the contents of the form in a "div" first and enclose it in the "form" tag
<form>
<div class="form container">
<!-- form elements -->
</div>
</form>

Related

how to set the width of a float button

this button is affecting everything that is in the same line with it, how do i make it fixed without having it affect the things on the same line with it. the fields are affected by the save button. if the save button is is the same line as the form field, it affects the form field
<div class="row">
<div class="col-md-4">
<form asp-action="Create">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<input type="hidden" asp-for="EmployeeCode" value="#EmpCode" />
</div>
<div class="form-group">
<label asp-for="IndustryId" class="control-label"></label>
<select asp-for="IndustryId" class="form-control" asp-items="ViewBag.IndustryId"></select>
</div>
<div class="form-group">
<label asp-for="SubIndustryId" class="control-label"></label>
<select asp-for="SubIndustryId" class="form-control" asp-items="ViewBag.SubIndustryId">
<option selected> - None - </option>
</select>
</div>
<div class="form-group">
<label asp-for="YearsExp" class="control-label"></label>
<input asp-for="YearsExp" class="form-control" />
<span asp-validation-for="YearsExp" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Proficiency" class="control-label"></label>
<input asp-for="Proficiency" class="form-control" />
<span asp-validation-for="Proficiency" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="BusinessArea" class="control-label"></label>
<input asp-for="BusinessArea" class="form-control" />
<span asp-validation-for="BusinessArea" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Feature" class="control-label"></label>
<input asp-for="Feature" class="form-control" />
<span asp-validation-for="Feature" class="text-danger"></span>
</div>
<div class="fixed-bottom">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="text-right" style="margin-bottom:20px;">
<input type="submit" value="Save Changes" class="btn btn-primary" />
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="fixed-bottom">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="text-right" style="margin-bottom:20px;">
<input type="submit" value="Save Changes" class="btn btn-primary" />
</div>
</div>
</div>
</div>
</div>

I've created a preview here: https://www.bootply.com/eItE7SJoQb
Maybe if you were to place the 'things on the same line' that you don't want it to affect..?

Bootstrap 3 - Two Column Layout - Get rid of placeholder

I am trying to create a form using bootstrap 3 that looks like
this.
I can get it to look pretty similar, but the only problem I have is that my last horizontal rule in the ETO section goes the entire way across. Is there any way I can make this only go across half of the page? I tried putting it in different col sizes inside that but I couldn't get it to work. Here's my html. Thanks ahead of time!
<div class="panel panel-default">
<div class="panel-heading">
<label style="color: white; font-weight: bold;">JOHNSON Summary</label>
</div>
<div class="panel-body">
<form class="form-horizontal" role="form" style="overflow-x:auto;">
<fieldset>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-5"> Status </label>
<div class="col-xs-7">
<select class="form-control" id="empStatus">
<option value="" disabled>Choose Type....</option>
<option value="Current">Current</option>
<option value="Terminated">Terminated</option>
</select>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-5"> Anniversary </label>
<div class="col-xs-7">
<input class='form-control' type="text" id="empAnniversary"/>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-5"> Start Date </label>
<div class="col-xs-7">
<input class='form-control' type="date" id="empStartDate"/>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-5"> Adjusted Start </label>
<div class="col-xs-7">
<input class='form-control' type="date" id="empAdjustedStart"/>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-5"> STD/LTD </label>
<div class="col-xs-7">
<input class='form-control' type="text" id="empSTDLTD"/>
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-5"> Uncharged </label>
<div class="col-xs-7">
<input class='form-control' type="text" id="empUncharged"/>
</div>
</div>
</div>
</fieldset>
<fieldset>
<h4>PTO</h4>
<div class="col-xs-12">
<div class="form-group">
<div class="col-xs-1"></div>
<label class="col-xs-2"> Base </label>
<div class="col-xs-3">
<input class='form-control' type="text" id="ptoBase" />
</div>
<div class="col-xs-6">
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-2" style="font-weight: bold;"> + </label>
<label class="col-xs-4"> Carryover </label>
<div class="col-xs-6">
<input class='form-control' type="text" id="ptoCarryover" />
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<div class="col-xs-1"></div>
<label class="col-xs-4"> Balance </label>
<div class="col-xs-6">
<input class='form-control' type="text" id="ptoBalance" />
</div>
<div class="col-xs-1"></div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-2" style="font-weight: bold;"> ― </label>
<label class="col-xs-4"> Borrowed </label>
<div class="col-xs-6">
<input class='form-control' type="text" id="ptoBorrowed" />
</div>
</div>
<hr style="border: solid 1px black;border-bottom:1px solid black;clear:both" />
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-1" style="font-weight: bold;"> ― </label>
<label class="col-xs-4"> Requests </label>
<div class="col-xs-6">
<input class='form-control' type="text" id="ptoRequests" />
</div>
<div class="col-xs-1"></div>
</div>
<hr style="border: solid 1px black;border-bottom:1px solid black;clear:both" />
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-2" style="font-weight: bold;"> = </label>
<label class="col-xs-4"> Balance </label>
<div class="col-xs-6">
<input class='form-control' type="text" id="ptoBalance" />
</div>
</div>
</div>
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-1" style="font-weight: bold;"> = </label>
<label class="col-xs-4"> Available </label>
<div class="col-xs-6">
<input class='form-control' type="text" id="ptoAvailable" />
</div>
<div class="col-xs-1"></div>
</div>
</div>
</fieldset>
<fieldset>
<h4>ETO</h4>
<div class="col-xs-12">
<div class="form-group">
<div class="col-xs-1"></div>
<label class="col-xs-2"> Earned </label>
<div class="col-xs-3">
<input class='form-control' type="text" id="etoEarned" />
</div>
<div class="col-xs-6">
</div>
</div>
</div>
<div class="col-xs-12">
<div class="form-group">
<label class="col-xs-1"> ― </label>
<label class="col-xs-2"> Requests </label>
<div class="col-xs-3">
<input class='form-control' type="text" id="etoRequested" />
</div>
<div class="col-xs-6">
</div>
</div>
<hr style="border: solid 1px black;border-bottom:1px solid black;clear:both" />
</div>
<div class="col-xs-12">
<div class="form-group">
<label class="col-xs-1"> = </label>
<label class="col-xs-2"> Available </label>
<div class="col-xs-3">
<input class='form-control' type="text" id="etoAvailable" />
</div>
<div class="col-xs-6">
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div>

UPDATED.
I think you need to use Bootstrap's horizontal form as described in official docs. It seems you are using horizontal form structure, but you've forgotten to add .form-horizontal class to your form element or to .form-group.

Vertical alignment of textbox

I want to align all the fields vertically which is exactly one below another. Currently all the fields are aligned randomly I am using bootstrap css The layout should be something like this:
Label1: Textbox1
Label2: Textbox2
Here is the code snippet:
Which class can i use to fix the alignment of textbox? Any help?
<div ng-controller="headerCtrl">
<div class="container" style="background-color:white">
<h2 style="color:black; text-align:center" ><b>Timesheet Information</b></h2>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<!--<div class="panel-heading">
<h4 class="panel-title" style="text-align: center">
<a>Add the Headers </a>
</h4>
</div>-->
<div class="panel-body">
<section>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group" style="margin-left:-125px;">
<label for="currentmonth">Total Work days in Current Month:</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" style="position:relative;left:-122px;">Annual Leave :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" style="position:relative;left:-140px;">Sick / Emergency Leave :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="sickleave" name="sickleave" ng-model="sickleave" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" style="position:relative;left:-122px;">Total Leave in current month (Annual Leave + Sick / Emergency Leave) :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="leave" name="leave" ng-model="leave" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" style="position:relative;left:-122px;">Total leaves from joining in FG until Previous Month 2016 (excluding Current Month 2016 ) :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="leave1" name="leave1" ng-model="leave1" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" style="position:relative;left:-122px;">Month your name was added in Field Glass :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="field" name="field" ng-model="field" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
</section>
<div class="pull-right">
<button type="submit" class="btn btn-primary" ng-click="Save()">Submit</button>
<button type="clear" class="btn btn-default" ng-click="clear()">Clear</button>
</div>
</div>
</div>
</div>
<div>
</div>
</div>
</div>

<div class="row">
<form>
<div class="form-group">
<label class="col-md-4" for="currentmonth">Total Work days in Current Month:</label>
<input class="col-md-4" type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required>
<div class="col-md-4"></div>
</div>
</form>
</div>
<div class="row">
<form>
<div class="form-group">
<label class="col-md-4" for="annualeave">Annual Leave :</label>
<input class="col-md-4" type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required>
<div class="col-md-4"></div>
</div>
</form>
</div>

This answer is different from the above answer given by Rafa Romero.
I have added different style for these.
Here is the 2 ways you can use this .
<section>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group" style="margin-left:-125px;">
<label for="currentmonth">Total Work days in Current Month:</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave">Annual Leave :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
</section>
<br><h1 class="text-center">OR</h1><br>
<section>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group" style="margin-left:-125px;">
<label for="currentmonth">Total Work days in Current Month:</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group" >
<label for="annualeave" style="position:relative;left:-122px;">Annual Leave :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
</section>

You are using bootstrap class so do one thing use columns and give .col-sm-8 and .com-sm-4 respectively and check.
<div class="form-group">
<label for="annualeave" class="col-sm-8">Annual Leave :</label>
<div class="col-sm-4">
<input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required>
</div>
</div>

You can try with absolute position for the texfields and aligning both at the same distance from the right or left side
input{
position: absolute;
left: 275px
}
<form class="form-inline" style="margin-left:20px">
<div class="form-group">
<label for="currentmonth">Total Work days in Current Month:</label>
<input type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required>
</div>
</form>
</div>
<br />
<div class="row">
<form class="form-inline" style="margin-left:20px">
<div class="form-group">
<label for="annualeave">Annual Leave :</label>
<input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required>
</div>
</form>
</div>
<br />

Alignment of label and textbox for my page

I want to align all the fields vertically which is exactly one below another. Currently all the fields are aligned randomly I am using bootstrap css The layout should be something like this:
Label1: Textbox1
Label2: Textbox2
Here is the code snippet:
Which class can i use to fix the alignment of textbox? Any help?
<div ng-controller="headerCtrl">
<div class="container" style="background-color:white">
<h2 style="color:black; text-align:center" ><b>Timesheet Information</b></h2>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<!--<div class="panel-heading">
<h4 class="panel-title" style="text-align: center">
<a>Add the Headers </a>
</h4>
</div>-->
<div class="panel-body">
<section>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group" style="margin-left:-125px;">
<label for="currentmonth">Total Work days in Current Month:</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" style="position:relative;left:-122px;">Annual Leave :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" style="position:relative;left:-140px;">Sick / Emergency Leave :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="sickleave" name="sickleave" ng-model="sickleave" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" style="position:relative;left:-122px;">Total Leave in current month (Annual Leave + Sick / Emergency Leave) :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="leave" name="leave" ng-model="leave" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" style="position:relative;left:-122px;">Total leaves from joining in FG until Previous Month 2016 (excluding Current Month 2016 ) :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="leave1" name="leave1" ng-model="leave1" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" style="position:relative;left:-122px;">Month your name was added in Field Glass :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="field" name="field" ng-model="field" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
</section>
<div class="pull-right">
<button type="submit" class="btn btn-primary" ng-click="Save()">Submit</button>
<button type="clear" class="btn btn-default" ng-click="clear()">Clear</button>
</div>
</div>
</div>
</div>
<div>
</div>
</div>
</div>

Your labels are too lengthy, I've just changed the structure with center align, is this what you need ?
.form-group {
width:50%;
float:left;
padding:0 15px;
}
.form-group input {
float:left;
}
.form-group label {
float:right;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div ng-controller="headerCtrl">
<div class="container" style="background-color:white">
<h2 style="color:black; text-align:center" ><b>Timesheet Information</b></h2>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<!--<div class="panel-heading">
<h4 class="panel-title" style="text-align: center">
<a>Add the Headers </a>
</h4>
</div>-->
<div class="panel-body">
<section>
<div class="row">
<div class="col-xs-12">
<form class="form-inline" style="">
<div class="form-group" >
<label for="currentmonth">Total Work days in Current Month:</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-xs-12">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" >Annual Leave :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-xs-12">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave">Sick / Emergency Leave :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="sickleave" name="sickleave" ng-model="sickleave" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-xs-12">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" >Total Leave in current month (Annual Leave + Sick / Emergency Leave) :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="leave" name="leave" ng-model="leave" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-xs-12">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" >Total leaves from joining in FG until Previous Month 2016 (excluding Current Month 2016 ) :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="leave1" name="leave1" ng-model="leave1" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
<br />
<div class="row">
<div class="col-xs-12">
<form class="form-inline" style="">
<div class="form-group">
<label for="annualeave" >Month your name was added in Field Glass :</label>
</div>
<div class="form-group">
<input type="text" class="form-control" id="field" name="field" ng-model="field" placeholder="Enter the details" required>
</div>
</form>
</div>
</div>
</section>
<div class="pull-right">
<button type="submit" class="btn btn-primary" ng-click="Save()">Submit</button>
<button type="clear" class="btn btn-default" ng-click="clear()">Clear</button>
</div>
</div>
</div>
</div>
<div> </div>
</div>
</div>

I have removed all your inline styles. There is no need for every field styling. You can do it with bootstrap classes.
<div ng-controller="headerCtrl">
<div class="container" style="background-color:white">
<h2 style="color:black; text-align:center"><b>Timesheet Information</b></h2>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-body">
<section>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="form-horizontal">
<div class="form-group">
<label class="col-sm-6 control-label" for="currentmonth">Total Work days in Current Month:</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="currentmonth" name="currentmonth" ng-model="currentmonth" placeholder="Enter the details" required/> </div>
</div>
<div class="form-group">
<label class="col-sm-6 control-label" for="annualeave">Annual Leave :</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="annualeave" name="annualeave" ng-model="annualeave" placeholder="Enter the details" required> </div>
</div>
<div class="form-group">
<label class="col-sm-6 control-label" for="annualeave">Sick / Emergency Leave :</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="sickleave" name="sickleave" ng-model="sickleave" placeholder="Enter the details" required/> </div>
</div>
<div class="form-group">
<label class="col-sm-6 control-label" for="annualeave">Total Leave in current month (Annual Leave + Sick / Emergency Leave) :</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="leave" name="leave" ng-model="leave" placeholder="Enter the details" required/> </div>
</div>
<div class="form-group">
<label class="col-sm-6 control-label" for="annualeave">Total leaves from joining in FG until Previous Month 2016 (excluding Current Month 2016):</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="leave1" name="leave1" ng-model="leave1" placeholder="Enter the details" required/> </div>
</div>
<div class="form-group">
<label class="col-sm-6 control-label" for="annualeave">Month your name was added in Field Glass :</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="field" name="field" ng-model="field" placeholder="Enter the details" required/> </div>
</div>
<div class="form-group">
<label class="col-sm-6 control-label"></label>
<div class="col-sm-6 text-right">
<button type="submit" class="btn btn-primary" ng-click="Save()">Submit</button>
<button type="clear" class="btn btn-default" ng-click="clear()">Clear</button>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>

Add class form-inline to the form element
example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Vertical (basic) form</h2>
<form class="form-inline">
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password:</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter password">
</div>
<div class="checkbox">
<label><input type="checkbox"> Remember me</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</body>
</html>
reference: http://www.w3schools.com/bootstrap/bootstrap_forms.asp

Remove the form-inline class from the form tag.

Twitter's Bootstrap - create a form with 2 columns

Is it possible to create a two columns form with twitter bootstrap?
They have some nice examples here:
http://twitter.github.com/bootstrap/base-css.html
But unfortunately all of them are using one column.

Wrap the form tag around your span divs. This is working for me, but you might need to tweak things a bit:
<div class="row">
<form class="form-horizontal">
<div class="span6">
<fieldset>
<legend>Legend text</legend>
<div class="control-group">
<label class="control-label" for="input01">Text input</label>
<div class="controls">
<input type="text" class="input-xlarge" id="input01">
<p class="help-block">Supporting help text</p>
</div>
</div>
</fieldset>
</div>
<div class="span6">
<fieldset>
<legend>Legend text</legend>
<div class="control-group">
<label class="control-label" for="input01">Text input</label>
<div class="controls">
<input type="text" class="input-xlarge" id="input01">
<p class="help-block">Supporting help text</p>
</div>
</div>
</fieldset>
</div>
</form>
</div>

<div class="row">
<div class="span12">
<div class="row-fluid">
<div class="span6">
<label>First Name</label>
<input type="text" class="span12" placeholder="">
</div>
<div class="span6">
<label>Last Name</label>
<input type="text" class="span12" placeholder="Type something…">
</div>
</div>
</div>
</div>
example: http://jsfiddle.net/JJnDg/460/

2 columns in Bootstrap 3 :
http://jsfiddle.net/52VtD/10419/
<div class="container">
<div class="row">
<form action="#">
<div class="col-xs-6">
<div class="form-group">
<label for="firstname">Firstname</label>
<input type="text" class="form-control" id="firstname" placeholder="Firstname">
</div>
<div class="form-group">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" placeholder="example#domain.com">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</div>
<div class="col-xs-6">
<div class="form-group">
<label for="lastname">Last Name</label>
<input type="text" class="form-control" id="lastname" placeholder="Last Name">
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
</div>
</form>
</div>
</div>

Example two columns with Bootstrap3
<div class="row">
<label>Date</label>
<div class="row">
<div class="col-xs-7" style=" padding: 0px 2px 2px 1px;">
<input type="date" class="form-control col-xs-12">
</div>
<div class="col-xs-5" style="padding: 0px 1px 2px 1px;">
<input type="time" class="form-control col-xs-12">
</div>
</div>
</div>

<div class="row-fluid">
<form id="myForm" modelAttribute="mymodel">
<div class="span12">
<div class="well clearfix">
<div class="span5">
<legend>Text1</legend>
<table width="100%" align="center">
<tr>
<td>
<label for="lable1">Label1 *</label>
</td>
<td>
<input id="input1" class="input-xlarge"/>
</td>
</tr>
<tr>
<td>
<label for="lable2">Label2 *</label>
</td>
<td>
<input id="input2" class="input-xlarge"/>
</td>
</tr>
<tr>
<td colspan=2 align="center">
<button class="btn btn-primary" type="submit">Submit</button>
<button class="btn" type="reset" id="resetButton">Reset</button>
</td>
</tr>
</table>
</div>
<div class="span5 offset1">
<legend>Text2</legend>
</div>
</div>
</div>
</form>

I used this and it works pretty well.. Its responsive to bootstrap
<div class="row-fluid">
<div class="span12">
<form action="" class="form-horizontal" name="user_account_add" id="user_account_add" method="post">
<div class="span12">
<div class="well clearfix">
<fieldset>
<div class="span5">
<legend>Business Info</legend>
<input type="hidden" name="action" value="save" />
<div class="control-group">
<label class="control-label">Business Name: </label>
<div class="controls">
<input type="text" class="input-xlarge" name="business_name" id="business_name">
</div>
</div>
<legend>Owner Info</legend>
<div class="control-group">
<label class="control-label">Firstname: </label>
<div class="controls">
<input type="text" class="input-xlarge" name="fname" id="owners_name">
</div>
</div>
<div class="control-group">
<label class="control-label">Lastname: </label>
<div class="controls">
<input type="text" class="input-xlarge" name="Lname" id="owners_name">
</div>
</div>
</div>
<div class="span7">
<legend>Business Operation Location</legend>
<div class="control-group">
<label class="control-label">Street Address</label>
<div class="controls">
<input type="text" class="input-xlarge" name="address" id="address" >
</div>
</div>
<div class="control-group">
<label class="control-label">City</label>
<div class="controls">
<input type="text" class="span3" name="city" id="city">
</div>
</div>
<div class="control-group">
<label class="control-label">State</label>
<div class="controls">
<input type="text" class="span3" name="state" id="state">
</div>
</div>
<div class="control-group">
<label class="control-label">Zip</label>
<div class="controls">
<input type="text" class="span3" name="zip" id="zip">
</div>
</div>
</div>
</fieldset>
<button class="btn btn-primary">Submit</button>
<button class="btn">Clear</button>
</div>
</div>
</form>
</div>
</div>

I use the following
<form class="no-margin" >
<fieldset>
<div class="form-group no-margin">
<div class="row-fluid">
<div class="form-group col-sm-6 no-margin"> Input 1 <div>
<div class="form-group col-sm-6 no-margin"> Input 2 <div>
</div>
</div>
<fieldset>
</form>