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

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>

Answer 2

You don't need the extra row, since the form-group acts like a row...

<form class="form-horizontal">
    <div class="form-group">
        <label class="col-xs-4 control-label" for="email">Email:</label>
        <div class="col-xs-8">
            <input class="form-control" placeholder="Email" id="email">
        </div>
    </div>
    <div class="form-group">
        <label class="col-xs-4 control-label" for="pwd">Password:</label>
        <div class="col-xs-8">
            <input class="form-control" placeholder="Password" id="pwd">
        </div>
    </div>
</form>

http://www.codeply.com/go/3uRFV0wXG4