Bootstrap: Input inside a label

Question

In order to avoid having to have an ID for each input element on my form I would like to place my form input inside the label (Bootstrap 3).

My problem is that this is causing extra vertical spacing between rows, the input is not filling the full width of its parent, and the inputs are not aligned.

<form class="form-horizontal">
    <div class="form-group">
        <label class="row">
          <span class="col-md-4 control-label">Email:</span>
          <div class="col-md-8">
            <input class="form-control" type="email" placeholder="Email"/>
          </div>
        </label>
    </div>
    <div class="form-group">
        <label class="row">
          <span class="col-md-4 control-label">Password:</span>
          <div class="col-md-8">
            <input class="form-control" type="password" placeholder="Password"/>
          </div>
        </label>
    </div>
</form>

Answer 1

The solution is to use the label itself as the form-group, remove the row, and to add a style to the CSS that sets display: block for labels. I have inlined the style in this HTML to show what I mean, obviously you should put it into a CSS.

<form class="form-horizontal">
    <label class="form-group" style="display: block">
      <span class="control-label col-md-2">Email:</span>
      <div class="col-md-10">
        <input class="form-control" type="email" placeholder="Email"/>
      </div>
    </label>
    <label class="form-group" style="display: block">
      <span class="control-label col-md-2">Password:</span>
      <div class="col-md-10">
        <input class="form-control" type="email" placeholder="Email"/>
      </div>
    </label>
</form>