title: Bootstrap: Input inside a label
body: <p>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 <code>label</code> (Bootstrap 3).</p>
  
  <p>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.</p>
  
  <p><a href="https://i.stack.imgur.com/7sQjr.png" rel="noreferrer"><img src="https://i.stack.imgur.com/7sQjr.png" alt="Illustration"></a></p>
  
  <pre><code>&lt;form class="form-horizontal"&gt;
      &lt;div class="form-group"&gt;
          &lt;label class="row"&gt;
            &lt;span class="col-md-4 control-label"&gt;Email:&lt;/span&gt;
            &lt;div class="col-md-8"&gt;
              &lt;input class="form-control" type="email" placeholder="Email"/&gt;
            &lt;/div&gt;
          &lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;label class="row"&gt;
            &lt;span class="col-md-4 control-label"&gt;Password:&lt;/span&gt;
            &lt;div class="col-md-8"&gt;
              &lt;input class="form-control" type="password" placeholder="Password"/&gt;
            &lt;/div&gt;
          &lt;/label&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>