fix forms examples and allow for inputs in labels

5 files changed, 126 insertions, 103 deletions

diff --git a/bootstrap.css b/bootstrap.css
index 6068875fd..7de580162 100644
--- a/bootstrap.css
+++ b/bootstrap.css
@@ -6,7 +6,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  *
  * Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: Wed Jan 25 20:31:53 PST 2012
+ * Date: Wed Jan 25 21:28:14 PST 2012
  */
 article,
 aside,
@@ -511,6 +511,9 @@ select,
   width: auto;
   height: auto;
 }
+label input, label textarea, label select {
+  display: block;
+}
 input[type=image], input[type=checkbox], input[type=radio] {
   width: auto;
   height: auto;
@@ -893,6 +896,9 @@ input:focus:required:invalid:focus, textarea:focus:required:invalid:focus, selec
 .control-group {
   margin-bottom: 9px;
 }
+.form-horizontal legend + .control-group {
+  padding-top: 27px;
+}
 .form-horizontal .control-group {
   margin-bottom: 18px;
 }
diff --git a/bootstrap.min.css b/bootstrap.min.css
index ba5e29549..06f511b14 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -96,6 +96,7 @@ label,input,button,select,textarea{font-family:"Helvetica Neue",Helvetica,Arial,
 label{display:block;margin-bottom:5px;color:#333333;}
 input,textarea,select,.uneditable-input{display:inline-block;width:210px;height:18px;padding:4px;margin-bottom:9px;font-size:13px;line-height:18px;color:#555555;border:1px solid #ccc;-webkit-border-radius:3px;border-radius:3px;}
 .uneditable-textarea{width:auto;height:auto;}
+label input,label textarea,label select{display:block;}
 input[type=image],input[type=checkbox],input[type=radio]{width:auto;height:auto;padding:0;margin:3px 0;*margin-top:0;line-height:normal;border:none;cursor:pointer;}
 input[type=file]{padding:initial;line-height:initial;border:initial;background-color:#ffffff;background-color:initial;-webkit-box-shadow:none;box-shadow:none;}
 input[type=button],input[type=reset],input[type=submit]{width:auto;height:auto;}
@@ -174,6 +175,7 @@ input:focus:required:invalid,textarea:focus:required:invalid,select:focus:requir
 .form-search input,.form-inline input,.form-horizontal input,.form-search textarea,.form-inline textarea,.form-horizontal textarea,.form-search select,.form-inline select,.form-horizontal select,.form-search .uneditable-input,.form-inline .uneditable-input,.form-horizontal .uneditable-input{display:inline-block;margin-bottom:0;}
 .form-search label,.form-inline label{display:inline-block;}
 .control-group{margin-bottom:9px;}
+.form-horizontal legend+.control-group{padding-top:27px;}
 .form-horizontal .control-group{margin-bottom:18px;}
 .form-horizontal .control-group>label{float:left;width:140px;padding-top:5px;text-align:right;}
 .form-horizontal .controls{margin-left:160px;}
diff --git a/docs/base-css.html b/docs/base-css.html
index 8340e0f60..a2eff98ee 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -939,63 +939,65 @@
   <div class="row">
     <div class="span8">
       <form class="form-horizontal">
-        <legend>Controls Bootstrap supports</legend>
-        <div class="control-group">
-          <label class="control-label" for="input01">Text input</label>
-          <div class="controls">
-            <input type="text" class="xlarge" name="input01">
-            <p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p>
+        <fieldset>
+          <legend>Controls Bootstrap supports</legend>
+          <div class="control-group">
+            <label class="control-label" for="input01">Text input</label>
+            <div class="controls">
+              <input type="text" class="xlarge" name="input01">
+              <p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p>
+            </div>
           </div>
-        </div>
-        <div class="control-group">
-          <label class="control-label" for="optionsCheckbox">Checkbox</label>
-          <div class="controls">
-            <label class="checkbox">
-              <input type="checkbox" name="optionsCheckbox" value="option1">
-              Option one is this and that&mdash;be sure to include why it’s great
-            </label>
+          <div class="control-group">
+            <label class="control-label" for="optionsCheckbox">Checkbox</label>
+            <div class="controls">
+              <label class="checkbox">
+                <input type="checkbox" name="optionsCheckbox" value="option1">
+                Option one is this and that&mdash;be sure to include why it’s great
+              </label>
+            </div>
           </div>
-        </div>
-        <div class="control-group">
-          <label class="control-label" for="select01">Select list</label>
-          <div class="controls">
-            <select name="select01">
-              <option>1</option>
-              <option>2</option>
-              <option>3</option>
-              <option>4</option>
-              <option>5</option>
-            </select>
+          <div class="control-group">
+            <label class="control-label" for="select01">Select list</label>
+            <div class="controls">
+              <select name="select01">
+                <option>1</option>
+                <option>2</option>
+                <option>3</option>
+                <option>4</option>
+                <option>5</option>
+              </select>
+            </div>
           </div>
-        </div>
-        <div class="control-group">
-          <label class="control-label" for="multiSelect">Multi-select</label>
-          <div class="controls">
-            <select multiple="multiple" name="multiSelect">
-              <option>1</option>
-              <option>2</option>
-              <option>3</option>
-              <option>4</option>
-              <option>5</option>
-            </select>
+          <div class="control-group">
+            <label class="control-label" for="multiSelect">Multi-select</label>
+            <div class="controls">
+              <select multiple="multiple" name="multiSelect">
+                <option>1</option>
+                <option>2</option>
+                <option>3</option>
+                <option>4</option>
+                <option>5</option>
+              </select>
+            </div>
           </div>
-        </div>
-        <div class="control-group">
-          <label class="control-label" for="fileInput">File input</label>
-          <div class="controls">
-            <input class="input-file" id="fileInput" name="fileInput" type="file">
+          <div class="control-group">
+            <label class="control-label" for="fileInput">File input</label>
+            <div class="controls">
+              <input class="input-file" id="fileInput" name="fileInput" type="file">
+            </div>
           </div>
-        </div>
-        <div class="control-group">
-          <label class="control-label" for="textarea">Textarea</label>
-          <div class="controls">
-            <textarea class="input-xlarge" name="textarea" id="textarea" rows="3"></textarea>
+          <div class="control-group">
+            <label class="control-label" for="textarea">Textarea</label>
+            <div class="controls">
+              <textarea class="input-xlarge" name="textarea" id="textarea" rows="3"></textarea>
+            </div>
           </div>
-        </div>
-        <div class="form-actions">
-          <button type="submit" class="btn primary">Save changes</button>
-          <button type="reset" class="btn">Cancel</button>
-        </div>
+          <div class="form-actions">
+            <button type="submit" class="btn primary">Save changes</button>
+            <button type="reset" class="btn">Cancel</button>
+          </div>
+        </fieldset>
       </form>
     </div>
     <div class="span4">
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index cbc0519e5..c2dd661ae 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -875,63 +875,65 @@
   <div class="row">
     <div class="span8">
       <form class="form-horizontal">
-        <legend>{{_i}}Controls Bootstrap supports{{/i}}</legend>
-        <div class="control-group">
-          <label class="control-label" for="input01">{{_i}}Text input{{/i}}</label>
-          <div class="controls">
-            <input type="text" class="xlarge" name="input01">
-            <p class="help-block">{{_i}}In addition to freeform text, any HTML5 text-based input appears like so.{{/i}}</p>
+        <fieldset>
+          <legend>{{_i}}Controls Bootstrap supports{{/i}}</legend>
+          <div class="control-group">
+            <label class="control-label" for="input01">{{_i}}Text input{{/i}}</label>
+            <div class="controls">
+              <input type="text" class="xlarge" name="input01">
+              <p class="help-block">{{_i}}In addition to freeform text, any HTML5 text-based input appears like so.{{/i}}</p>
+            </div>
           </div>
-        </div>
-        <div class="control-group">
-          <label class="control-label" for="optionsCheckbox">{{_i}}Checkbox{{/i}}</label>
-          <div class="controls">
-            <label class="checkbox">
-              <input type="checkbox" name="optionsCheckbox" value="option1">
-              {{_i}}Option one is this and that&mdash;be sure to include why it’s great{{/i}}
-            </label>
+          <div class="control-group">
+            <label class="control-label" for="optionsCheckbox">{{_i}}Checkbox{{/i}}</label>
+            <div class="controls">
+              <label class="checkbox">
+                <input type="checkbox" name="optionsCheckbox" value="option1">
+                {{_i}}Option one is this and that&mdash;be sure to include why it’s great{{/i}}
+              </label>
+            </div>
           </div>
-        </div>
-        <div class="control-group">
-          <label class="control-label" for="select01">{{_i}}Select list{{/i}}</label>
-          <div class="controls">
-            <select name="select01">
-              <option>1</option>
-              <option>2</option>
-              <option>3</option>
-              <option>4</option>
-              <option>5</option>
-            </select>
+          <div class="control-group">
+            <label class="control-label" for="select01">{{_i}}Select list{{/i}}</label>
+            <div class="controls">
+              <select name="select01">
+                <option>1</option>
+                <option>2</option>
+                <option>3</option>
+                <option>4</option>
+                <option>5</option>
+              </select>
+            </div>
           </div>
-        </div>
-        <div class="control-group">
-          <label class="control-label" for="multiSelect">{{_i}}Multi-select{{/i}}</label>
-          <div class="controls">
-            <select multiple="multiple" name="multiSelect">
-              <option>1</option>
-              <option>2</option>
-              <option>3</option>
-              <option>4</option>
-              <option>5</option>
-            </select>
+          <div class="control-group">
+            <label class="control-label" for="multiSelect">{{_i}}Multi-select{{/i}}</label>
+            <div class="controls">
+              <select multiple="multiple" name="multiSelect">
+                <option>1</option>
+                <option>2</option>
+                <option>3</option>
+                <option>4</option>
+                <option>5</option>
+              </select>
+            </div>
           </div>
-        </div>
-        <div class="control-group">
-          <label class="control-label" for="fileInput">{{_i}}File input{{/i}}</label>
-          <div class="controls">
-            <input class="input-file" id="fileInput" name="fileInput" type="file">
+          <div class="control-group">
+            <label class="control-label" for="fileInput">{{_i}}File input{{/i}}</label>
+            <div class="controls">
+              <input class="input-file" id="fileInput" name="fileInput" type="file">
+            </div>
           </div>
-        </div>
-        <div class="control-group">
-          <label class="control-label" for="textarea">{{_i}}Textarea{{/i}}</label>
-          <div class="controls">
-            <textarea class="input-xlarge" name="textarea" id="textarea" rows="3"></textarea>
+          <div class="control-group">
+            <label class="control-label" for="textarea">{{_i}}Textarea{{/i}}</label>
+            <div class="controls">
+              <textarea class="input-xlarge" name="textarea" id="textarea" rows="3"></textarea>
+            </div>
           </div>
-        </div>
-        <div class="form-actions">
-          <button type="submit" class="btn primary">{{_i}}Save changes{{/i}}</button>
-          <button type="reset" class="btn">{{_i}}Cancel{{/i}}</button>
-        </div>
+          <div class="form-actions">
+            <button type="submit" class="btn primary">{{_i}}Save changes{{/i}}</button>
+            <button type="reset" class="btn">{{_i}}Cancel{{/i}}</button>
+          </div>
+        </fieldset>
       </form>
     </div>
     <div class="span4">
diff --git a/lib/forms.less b/lib/forms.less
index 7451f36ef..3acb8c5dc 100644
--- a/lib/forms.less
+++ b/lib/forms.less
@@ -68,6 +68,13 @@ select,
   height: auto;
 }
 
+// Inputs within a label
+label input,
+label textarea,
+label select {
+  display: block;
+}
+
 // Mini reset for unique input types
 input[type=image],
 input[type=checkbox],
@@ -474,6 +481,10 @@ select:focus:required:invalid {
 // --------------------------
 
 .form-horizontal {
+  // Legend collapses margin, so we're relegated to padding
+  legend + .control-group {
+    padding-top: @baseLineHeight * 1.5;
+  }
   // Increase spacing between groups
   .control-group {
     margin-bottom: @baseLineHeight;