Refactor forms styles

* Reorganize forms.less
* Change from attribute selectors to `.form-control`. Few lines, less
specific (meaning easier overrides as `element[type=""]` is more
specific than a class), less intrusive, and more performant.
* Add `.form-group` for basic spacing in vertical forms.
* Remove (unnecessary?) `margin: 0;` from `form` element (as far as I
can tell no browser sets that anyway).

css.html

@@ -1162,17 +1162,23 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     </div>
 
     <h2 id="forms-example">Basic example</h2>
-    <p>Individual form controls automatically receive some global styling. All textual <code>&lt;input&gt;</code>, <code>&lt;textarea&gt;</code>, and <code>&lt;select&gt;</code> elements are set to <code>width: 100%;</code> by default.</p>
+    <p>Individual form controls automatically receive some global styling. All textual <code>&lt;input&gt;</code>, <code>&lt;textarea&gt;</code>, and <code>&lt;select&gt;</code> elements are set to <code>width: 100%;</code> by default. Wrap labels and controls in <code>.form-group</code> for optimum spacing.</p>
     <form class="bs-example">
       <fieldset>
         <legend>Legend</legend>
+        <div class="form-group">
           <label for="exampleInputEmail">Email address</label>
-        <input type="text" id="exampleInputEmail" placeholder="Enter email">
+          <input type="text" class="form-control" id="exampleInputEmail" placeholder="Enter email">
+        </div>
+        <div class="form-group">
           <label for="exampleInputPassword">Password</label>
-        <input type="password" id="exampleInputPassword" placeholder="Password">
+          <input type="password" class="form-control" id="exampleInputPassword" placeholder="Password">
+        </div>
+        <div class="form-group">
           <label for="exampleInputFile">File input</label>
           <input type="file" id="exampleInputFile">
           <p class="help-block">Example block-level help text here.</p>
+        </div>
         <div class="checkbox">
           <label>
             <input type="checkbox"> Check me out
@@ -1185,9 +1191,19 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 <form>
   <fieldset>
     <legend>Legend</legend>
-    <label for="exampleInput">Label name</label>
-    <input type="text" id="exampleInput" placeholder="Type something…">
+    <div class="form-group">
+      <label for="exampleInputEmail">Email address</label>
+      <input type="text" class="form-control" id="exampleInputEmail" placeholder="Enter email">
+    </div>
+    <div class="form-group">
+      <label for="exampleInputPassword">Password</label>
+      <input type="password" class="form-control" id="exampleInputPassword" placeholder="Password">
+    </div>
+    <div class="form-group">
+      <label for="exampleInputFile">File input</label>
+      <input type="file" id="exampleInputFile">
       <p class="help-block">Example block-level help text here.</p>
+    </div>
     <div class="checkbox">
       <label>
         <input type="checkbox"> Check me out
@@ -1209,8 +1225,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       <p>Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.</p>
     </div>
     <form class="bs-example form-inline">
-      <input type="text" placeholder="Email">
-      <input type="password" placeholder="Password">
+      <input type="text" class="form-control" placeholder="Email">
+      <input type="password" class="form-control" placeholder="Password">
       <div class="checkbox">
         <label>
           <input type="checkbox"> Remember me
@@ -1220,8 +1236,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     </form><!-- /example -->
 {% highlight html %}
 <form class="form-inline">
-  <input type="text" placeholder="Email">
-  <input type="password" placeholder="Password">
+  <input type="text" class="form-control" placeholder="Email">
+  <input type="password" class="form-control" placeholder="Password">
   <div class="checkbox">
     <label>
       <input type="checkbox"> Remember me
@@ -1237,13 +1253,13 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       <div class="row">
         <label for="inputEmail" class="col-lg-2 control-label">Email</label>
         <div class="col-lg-10">
-          <input type="text" id="inputEmail" placeholder="Email">
+          <input type="text" class="form-control" id="inputEmail" placeholder="Email">
         </div>
       </div>
       <div class="row">
         <label for="inputPassword" class="col-lg-2 control-label">Password</label>
         <div class="col-lg-10">
-          <input type="password" id="inputPassword" placeholder="Password">
+          <input type="password" class="form-control" id="inputPassword" placeholder="Password">
           <div class="checkbox">
             <label>
               <input type="checkbox"> Remember me
@@ -1258,7 +1274,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% highlight html %}
 <form class="form-horizontal">
   <div class="row">
-    <label for="inputEmail" class="col-lg-2 control-label">Email</label>
+    <label for="inputEmail" class="form-control" class="col-lg-2 control-label">Email</label>
     <div class="col-lg-10">
       <input type="text" id="inputEmail" placeholder="Email">
     </div>
@@ -1266,7 +1282,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
   <div class="row">
     <label for="inputPassword" class="col-lg-2 control-label">Password</label>
     <div class="col-lg-10">
-      <input type="password" id="inputPassword" placeholder="Password">
+      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
       <div class="checkbox">
         <label>
           <input type="checkbox"> Remember me
@@ -1291,16 +1307,16 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       <p>Inputs will only be fully styled if their <code>type</code> is properly declared.</p>
     </div>
     <form class="bs-example">
-      <input type="text" placeholder="Text input">
+      <input type="text" class="form-control" placeholder="Text input">
     </form>
 {% highlight html %}
-<input type="text" placeholder="Text input">
+<input type="text" class="form-control" placeholder="Text input">
 {% endhighlight %}
 
     <h3>Textarea</h3>
     <p>Form control which supports multiple lines of text. Change <code>rows</code> attribute as necessary.</p>
     <form class="bs-example">
-      <textarea rows="3"></textarea>
+      <textarea class="form-control" rows="3"></textarea>
     </form>
 {% highlight html %}
 <textarea rows="3"></textarea>
@@ -1378,7 +1394,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <h3>Selects</h3>
     <p>Use the default option or specify a <code>multiple="multiple"</code> to show multiple options at once.</p>
     <form class="bs-example">
-      <select>
+      <select class="form-control">
         <option>1</option>
         <option>2</option>
         <option>3</option>
@@ -1386,7 +1402,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         <option>5</option>
       </select>
       <br>
-      <select multiple="multiple">
+      <select multiple="multiple" class="form-control">
         <option>1</option>
         <option>2</option>
         <option>3</option>
@@ -1395,7 +1411,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       </select>
     </form>
 {% highlight html %}
-<select>
+<select class="form-control">
   <option>1</option>
   <option>2</option>
   <option>3</option>
@@ -1403,7 +1419,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
   <option>5</option>
 </select>
 
-<select multiple="multiple">
+<select multiple="multiple" class="form-control">
   <option>1</option>
   <option>2</option>
   <option>3</option>
@@ -1420,19 +1436,19 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <h3 id="forms-input-focus">Input focus</h3>
     <p>We remove the default <code>outline</code> styles on some form controls and apply a <code>box-shadow</code> in its place for <code>:focus</code>.</p>
     <form class="bs-example">
-      <input class="focused" id="focusedInput" type="text" value="This is focused...">
+      <input class="form-control" id="focusedInput" type="text" value="This is focused...">
     </form>
 {% highlight html %}
-<input id="focusedInput" type="text" value="This is focused...">
+<input class="form-control" id="focusedInput" type="text" value="This is focused...">
 {% endhighlight %}
 
     <h3 id="forms-disabled-inputs">Disabled inputs</h3>
     <p>Add the <code>disabled</code> attribute on an input to prevent user input and trigger a slightly different look.</p>
     <form class="bs-example">
-      <input class="input-xlarge" id="disabledInput" type="text" placeholder="Disabled input here…" disabled>
+      <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here…" disabled>
     </form>
 {% highlight html %}
-<input id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
+<input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
 {% endhighlight %}
 
     <h3 id="forms-disabled-fieldsets">Disabled fieldsets</h3>
@@ -1450,8 +1466,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
     <form class="bs-example form-inline">
       <fieldset disabled>
-        <input type="text" placeholder="Disabled input">
-        <select>
+        <input type="text" class="form-control" placeholder="Disabled input">
+        <select class="form-control">
           <option>Disabled select</option>
         </select>
         <div class="checkbox">
@@ -1465,14 +1481,10 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% highlight html %}
 <form class="form-inline">
   <fieldset disabled>
-    <div>
-      <input type="text" placeholder="Disabled input">
-    </div>
-    <div>
-      <select>
+    <input type="text" class="form-control" placeholder="Disabled input">
+    <select class="form-control">
       <option>Disabled select</option>
     </select>
-    </div>
     <div class="checkbox">
       <label>
         <input type="checkbox"> Can't check this
@@ -1495,19 +1507,19 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       <div class="has-warning">
         <label class="control-label" for="inputWarning">Input with warning</label>
         <div class="controls">
-          <input type="text" class="input-with-feedback" id="inputWarning">
+          <input type="text" class="form-control input-with-feedback" id="inputWarning">
         </div>
       </div>
       <div class="has-error">
         <label class="control-label" for="inputError">Input with error</label>
         <div class="controls">
-          <input type="text" class="input-with-feedback" id="inputError">
+          <input type="text" class="form-control input-with-feedback" id="inputError">
         </div>
       </div>
       <div class="has-success">
         <label class="control-label" for="inputSuccess">Input with success</label>
         <div class="controls">
-          <input type="text" class="input-with-feedback" id="inputSuccess">
+          <input type="text" class="form-control input-with-feedback" id="inputSuccess">
         </div>
       </div>
     </form>
@@ -1515,19 +1527,19 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 <div class="has-warning">
   <label class="control-label" for="inputWarning">Input with warning</label>
   <div class="controls">
-    <input type="text" class="input-with-feedback" id="inputWarning">
+    <input type="text" class="form-control input-with-feedback" id="inputWarning">
   </div>
 </div>
 <div class="has-error">
   <label class="control-label" for="inputError">Input with error</label>
   <div class="controls">
-    <input type="text" class="input-with-feedback" id="inputError">
+    <input type="text" class="form-control input-with-feedback" id="inputError">
   </div>
 </div>
 <div class="has-success">
   <label class="control-label" for="inputSuccess">Input with success</label>
   <div class="controls">
-    <input type="text" class="input-with-feedback" id="inputSuccess">
+    <input type="text" class="form-control input-with-feedback" id="inputSuccess">
   </div>
 </div>
 {% endhighlight %}
@@ -1552,34 +1564,34 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <form class="bs-example bs-example-form">
       <div class="input-group col-lg-9">
         <span class="input-group-addon">@</span>
-        <input type="text" placeholder="Username">
+        <input type="text" class="form-control" placeholder="Username">
       </div>
       <br>
       <div class="input-group col-lg-6">
-        <input type="text">
+        <input type="text" class="form-control">
         <span class="input-group-addon">.00</span>
       </div>
       <br>
       <div class="input-group col-lg-3">
         <span class="input-group-addon">$</span>
-        <input type="text">
+        <input type="text" class="form-control">
         <span class="input-group-addon">.00</span>
       </div>
     </form>
 {% highlight html %}
 <div class="input-group col-lg-9">
   <span class="input-group-addon">@</span>
-  <input type="text" placeholder="Username">
+  <input type="text" class="form-control" placeholder="Username">
 </div>
 
 <div class="input-group col-lg-6">
-  <input type="text">
+  <input type="text" class="form-control">
   <span class="input-group-addon">.00</span>
 </div>
 
 <div class="input-group col-lg-3">
   <span class="input-group-addon">$</span>
-  <input type="text">
+  <input type="text" class="form-control">
   <span class="input-group-addon">.00</span>
 </div>
 {% endhighlight %}
@@ -1589,33 +1601,33 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <form class="bs-example bs-example-form">
       <div class="input-group col-lg-9">
         <span class="input-group-addon input-large">@</span>
-        <input type="text" class="input-large" placeholder="Username">
+        <input type="text" class="form-control input-large" placeholder="Username">
       </div>
       <br>
       <div class="input-group col-lg-9">
         <span class="input-group-addon">@</span>
-        <input type="text" placeholder="Username">
+        <input type="text" class="form-control" placeholder="Username">
       </div>
       <br>
       <div class="input-group col-lg-9">
         <span class="input-group-addon input-small">@</span>
-        <input type="text" class="input-small" placeholder="Username">
+        <input type="text" class="form-control input-small" placeholder="Username">
       </div>
     </form>
 {% highlight html %}
 <div class="input-group col-lg-9">
   <span class="input-group-addon input-large">@</span>
-  <input type="text" class="input-large" placeholder="Username">
+  <input type="text" class="form-control input-large" placeholder="Username">
 </div>
 
 <div class="input-group col-lg-9">
   <span class="input-group-addon">@</span>
-  <input type="text" placeholder="Username">
+  <input type="text" class="form-control" placeholder="Username">
 </div>
 
 <div class="input-group col-lg-9">
   <span class="input-group-addon input-small">@</span>
-  <input type="text" class="input-small" placeholder="Username">
+  <input type="text" class="form-control input-small" placeholder="Username">
 </div>
 {% endhighlight %}
 
@@ -1626,11 +1638,11 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
         <span class="input-group-btn">
           <button class="btn btn-default" type="button">Go!</button>
         </span>
-        <input type="text">
+        <input type="text" class="form-control">
       </div>
       <br>
       <div class="input-group col-lg-7">
-        <input type="text">
+        <input type="text" class="form-control">
         <span class="input-group-btn">
           <button class="btn btn-default" type="button">Go!</button>
         </span>
@@ -1641,11 +1653,11 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
   <span class="input-group-btn">
     <button class="btn btn-default" type="button">Go!</button>
   </span>
-  <input type="text">
+  <input type="text" class="form-control">
 </div>
 
 <div class="input-group col-lg-7">
-  <input type="text">
+  <input type="text" class="form-control">
   <span class="input-group-btn">
     <button class="btn btn-default" type="button">Go!</button>
   </span>
@@ -1666,11 +1678,11 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
             <li><a href="#">Separated link</a></li>
           </ul>
         </div><!-- /btn-group -->
-        <input type="text">
+        <input type="text" class="form-control">
       </div><!-- /input-group -->
       <br>
       <div class="input-group col-lg-7">
-        <input type="text">
+        <input type="text" class="form-control">
         <div class="input-group-btn">
           <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
           <ul class="dropdown-menu">
@@ -1695,11 +1707,11 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       <li><a href="#">Separated link</a></li>
     </ul>
   </div><!-- /btn-group -->
-  <input type="text">
+  <input type="text" class="form-control">
 </div><!-- /input-group -->
 
 <div class="input-group col-lg-7">
-  <input type="text">
+  <input type="text" class="form-control">
   <div class="input-group-btn">
     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action <span class="caret"></span></button>
     <ul class="dropdown-menu">
@@ -1729,13 +1741,13 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
             <li><a href="#">Separated link</a></li>
           </ul>
         </div>
-        <input type="text">
+        <input type="text" class="form-control">
       </div>
 
       <br>
 
       <div class="input-group col-lg-7">
-        <input type="text">
+        <input type="text" class="form-control">
         <div class="input-group-btn">
           <button type="button" class="btn btn-default" tabindex="-1">Action</button>
           <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" tabindex="-1">
@@ -1756,11 +1768,11 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
   <div class="input-group-btn">
     <!-- Button and dropdown menu -->
   </div>
-  <input type="text">
+  <input type="text" class="form-control">
 </div>
 
 <div class="input-group col-lg-7">
-  <input type="text">
+  <input type="text" class="form-control">
   <div class="input-group-btn btn-group">
     <!-- Button and dropdown menu -->
   </div>
@@ -1774,29 +1786,29 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <p>Create larger or smaller form controls that match button sizes.</p>
     <form class="bs-example bs-example-control-sizing">
       <div class="controls docs-input-sizes">
-        <input class="input-large" type="text" placeholder=".input-large">
-        <input type="text" placeholder="Default input">
-        <input class="input-small" type="text" placeholder=".input-small">
+        <input class="form-control input-large" type="text" placeholder=".input-large">
+        <input type="text" class="form-control" placeholder="Default input">
+        <input class="form-control input-small" type="text" placeholder=".input-small">
 
-        <select class="input-large">
+        <select class="form-control input-large">
           <option value="">.input-large</option>
         </select>
-        <select>
+        <select class="form-control">
           <option value="">Default select</option>
         </select>
-        <select class="input-small">
+        <select class="form-control input-small">
           <option value="">.input-small</option>
         </select>
       </div>
     </form>
 {% highlight html %}
-<input class="input-large" type="text" placeholder=".input-large">
-<input type="text" placeholder="Default input">
-<input class="input-small" type="text" placeholder=".input-small">
+<input class="form-control input-large" type="text" placeholder=".input-large">
+<input class="form-control"type="text" placeholder="Default input">
+<input class="form-control input-small" type="text" placeholder=".input-small">
 
-<select class="input-large">...</select>
-<select>...</select>
-<select class="input-small">...</select>
+<select class="form-control input-large">...</select>
+<select class="form-control">...</select>
+<select class="form-control input-small">...</select>
 {% endhighlight %}
 
     <h4>Column sizing</h4>
@@ -1804,26 +1816,26 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <form class="bs-example" style="padding-bottom: 15px;">
       <div class="row">
         <div class="col-lg-2">
-          <input type="text" placeholder=".col-lg-2">
+          <input type="text" class="form-control" placeholder=".col-lg-2">
         </div>
         <div class="col-lg-3">
-          <input type="text" placeholder=".col-lg-3">
+          <input type="text" class="form-control" placeholder=".col-lg-3">
         </div>
         <div class="col-lg-4">
-          <input type="text" placeholder=".col-lg-4">
+          <input type="text" class="form-control" placeholder=".col-lg-4">
         </div>
       </div>
     </form>
 {% highlight html %}
 <div class="row">
   <div class="col-lg-2">
-    <input type="text" placeholder=".col-lg-2">
+    <input type="text" class="form-control" placeholder=".col-lg-2">
   </div>
   <div class="col-lg-3">
-    <input type="text" placeholder=".col-lg-3">
+    <input type="text" class="form-control" placeholder=".col-lg-3">
   </div>
   <div class="col-lg-4">
-    <input type="text" placeholder=".col-lg-4">
+    <input type="text" class="form-control" placeholder=".col-lg-4">
   </div>
 </div>
 {% endhighlight %}
@@ -1831,7 +1843,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <h3 id="forms-help-text">Help text</h3>
     <p>Block level help text for form controls.</p>
     <form class="bs-example">
-      <input type="text">
+      <input type="text" class="form-control">
       <span class="help-block">A longer block of help text that breaks onto a new line and may extend beyond one line.</span>
     </form>
 {% highlight html %}

dist/css/bootstrap.css

@@ -1274,10 +1274,6 @@ table th[class^="col-"] {
   border-color: #f8e5be;
 }
 
-form {
-  margin: 0;
-}
-
 fieldset {
   padding: 0;
   margin: 0;
@@ -1302,138 +1298,12 @@ label {
   font-weight: bold;
 }
 
-select,
-textarea,
-input[type="text"],
-input[type="password"],
-input[type="datetime"],
-input[type="datetime-local"],
-input[type="date"],
-input[type="month"],
-input[type="time"],
-input[type="week"],
-input[type="number"],
-input[type="email"],
-input[type="url"],
-input[type="search"],
-input[type="tel"],
-input[type="color"] {
-  display: block;
-  height: 38px;
-  padding: 8px 12px;
-  font-size: 14px;
-  line-height: 1.428571429;
-  color: #555555;
-  vertical-align: middle;
-  background-color: #ffffff;
-  border: 1px solid #cccccc;
-  border-radius: 4px;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
-          transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
-}
-
-select:focus,
-textarea:focus,
-input[type="text"]:focus,
-input[type="password"]:focus,
-input[type="datetime"]:focus,
-input[type="datetime-local"]:focus,
-input[type="date"]:focus,
-input[type="month"]:focus,
-input[type="time"]:focus,
-input[type="week"]:focus,
-input[type="number"]:focus,
-input[type="email"]:focus,
-input[type="url"]:focus,
-input[type="search"]:focus,
-input[type="tel"]:focus,
-input[type="color"]:focus {
-  border-color: rgba(82, 168, 236, 0.8);
-  outline: 0;
-  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
-}
-
-select[disabled],
-textarea[disabled],
-input[type="text"][disabled],
-input[type="password"][disabled],
-input[type="datetime"][disabled],
-input[type="datetime-local"][disabled],
-input[type="date"][disabled],
-input[type="month"][disabled],
-input[type="time"][disabled],
-input[type="week"][disabled],
-input[type="number"][disabled],
-input[type="email"][disabled],
-input[type="url"][disabled],
-input[type="search"][disabled],
-input[type="tel"][disabled],
-input[type="color"][disabled],
-select[readonly],
-textarea[readonly],
-input[type="text"][readonly],
-input[type="password"][readonly],
-input[type="datetime"][readonly],
-input[type="datetime-local"][readonly],
-input[type="date"][readonly],
-input[type="month"][readonly],
-input[type="time"][readonly],
-input[type="week"][readonly],
-input[type="number"][readonly],
-input[type="email"][readonly],
-input[type="url"][readonly],
-input[type="search"][readonly],
-input[type="tel"][readonly],
-input[type="color"][readonly],
-fieldset[disabled] select,
-fieldset[disabled] textarea,
-fieldset[disabled] input[type="text"],
-fieldset[disabled] input[type="password"],
-fieldset[disabled] input[type="datetime"],
-fieldset[disabled] input[type="datetime-local"],
-fieldset[disabled] input[type="date"],
-fieldset[disabled] input[type="month"],
-fieldset[disabled] input[type="time"],
-fieldset[disabled] input[type="week"],
-fieldset[disabled] input[type="number"],
-fieldset[disabled] input[type="email"],
-fieldset[disabled] input[type="url"],
-fieldset[disabled] input[type="search"],
-fieldset[disabled] input[type="tel"],
-fieldset[disabled] input[type="color"] {
-  cursor: not-allowed;
-  background-color: #eeeeee;
-}
-
-input,
-select,
-textarea {
-  width: 100%;
-}
-
-input[type="file"],
-input[type="image"],
-input[type="submit"],
-input[type="reset"],
-input[type="button"],
-input[type="radio"],
-input[type="checkbox"] {
-  width: auto;
-}
-
 input[type="search"] {
   -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
           box-sizing: border-box;
 }
 
-textarea {
-  height: auto;
-}
-
 input[type="radio"],
 input[type="checkbox"] {
   margin: 4px 0 0;
@@ -1471,26 +1341,62 @@ input[type="number"]::-webkit-inner-spin-button {
   height: auto;
 }
 
-input:-moz-placeholder,
-textarea:-moz-placeholder {
+.form-control:-moz-placeholder {
   color: #999999;
 }
 
-input::-moz-placeholder,
-textarea::-moz-placeholder {
+.form-control::-moz-placeholder {
   color: #999999;
 }
 
-input:-ms-input-placeholder,
-textarea:-ms-input-placeholder {
+.form-control:-ms-input-placeholder {
   color: #999999;
 }
 
-input::-webkit-input-placeholder,
-textarea::-webkit-input-placeholder {
+.form-control::-webkit-input-placeholder {
   color: #999999;
 }
 
+.form-control {
+  display: block;
+  width: 100%;
+  height: 38px;
+  padding: 8px 12px;
+  font-size: 14px;
+  line-height: 1.428571429;
+  color: #555555;
+  vertical-align: middle;
+  background-color: #ffffff;
+  border: 1px solid #cccccc;
+  border-radius: 4px;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+          transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
+}
+
+.form-control:focus {
+  border-color: rgba(82, 168, 236, 0.8);
+  outline: 0;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
+          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
+}
+
+.form-control[disabled],
+.form-control[readonly],
+fieldset[disabled] .form-control {
+  cursor: not-allowed;
+  background-color: #eeeeee;
+}
+
+textarea.form-control {
+  height: auto;
+}
+
+.form-group {
+  margin-bottom: 15px;
+}
+
 .radio,
 .checkbox {
   display: block;

less/forms.less

@@ -3,12 +3,9 @@
 // --------------------------------------------------
 
 
-// Non-controls
-// -------------------------
-
-form {
-  margin: 0;
-}
+// Normalize non-controls
+//
+// Restyle and baseline non-control form elements.
 
 fieldset {
   padding: 0;
@@ -34,86 +31,14 @@ label {
   font-weight: bold;
 }
 
-// Form controls
-// -------------------------
 
-// Shared size and type resets
-select,
-textarea,
-input[type="text"],
-input[type="password"],
-input[type="datetime"],
-input[type="datetime-local"],
-input[type="date"],
-input[type="month"],
-input[type="time"],
-input[type="week"],
-input[type="number"],
-input[type="email"],
-input[type="url"],
-input[type="search"],
-input[type="tel"],
-input[type="color"] {
-  display: block;
-  height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
-  padding: @padding-base-vertical @padding-base-horizontal;
-  font-size: @font-size-base;
-  line-height: @line-height-base;
-  color: @gray;
-  vertical-align: middle;
-  background-color: @input-bg;
-  border: 1px solid @input-border;
-  border-radius: @input-border-radius;
-  .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
-  .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
-
-  &:focus {
-    border-color: rgba(82,168,236,.8);
-    outline: 0;
-    .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)");
-  }
-
-  // Disabled and read-only inputs
-  // Note: HTML5 says that inputs under a fieldset > legend:first-child won't be
-  //   disabled if the fieldset is disabled. Due to implementation difficulty,
-  //   we don't honor that edge case; we style them as disabled anyway.
-  &[disabled],
-  &[readonly],
-  fieldset[disabled] & {
-    cursor: not-allowed;
-    background-color: @input-bg-disabled;
-  }
-}
-
-// Reset appearance properties for textual inputs and textarea
-// Can't be on input[type=*] selectors or it's too specific
-input,
-select,
-textarea {
-  width: 100%;
-}
-
-// Reset width of input images, buttons, radios, checkboxes
-input[type="file"],
-input[type="image"],
-input[type="submit"],
-input[type="reset"],
-input[type="button"],
-input[type="radio"],
-input[type="checkbox"] {
-  width: auto; // Override of generic input selector
-}
+// Normalize form controls
 
 // Override content-box in Normalize (* isn't specific enough)
 input[type="search"] {
   .box-sizing(border-box);
 }
 
-// Reset height since textareas have rows
-textarea {
-  height: auto;
-}
-
 // Position radios and checkboxes better
 input[type="radio"],
 input[type="checkbox"] {
@@ -159,19 +84,89 @@ input[type="number"] {
 
 
 // Placeholder
-// -------------------------
-
-// Placeholder text gets special styles because when browsers invalidate entire lines if it doesn't understand a selector
-input,
-textarea {
+//
+// Placeholder text gets special styles because when browsers invalidate entire
+// lines if it doesn't understand a selector/
+.form-control {
   .placeholder();
 }
 
 
-// CHECKBOXES & RADIOS
-// -------------------
+// Common form controls
+//
+// Shared size and type resets for form controls. Apply `.form-control` to any
+// of the following form controls:
+//
+// select
+// textarea
+// input[type="text"]
+// input[type="password"]
+// input[type="datetime"]
+// input[type="datetime-local"]
+// input[type="date"]
+// input[type="month"]
+// input[type="time"]
+// input[type="week"]
+// input[type="number"]
+// input[type="email"]
+// input[type="url"]
+// input[type="search"]
+// input[type="tel"]
+// input[type="color"]
+
+.form-control {
+  display: block;
+  width: 100%;
+  height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
+  padding: @padding-base-vertical @padding-base-horizontal;
+  font-size: @font-size-base;
+  line-height: @line-height-base;
+  color: @gray;
+  vertical-align: middle;
+  background-color: @input-bg;
+  border: 1px solid @input-border;
+  border-radius: @input-border-radius;
+  .box-shadow(inset 0 1px 1px rgba(0,0,0,.075));
+  .transition(~"border-color ease-in-out .15s, box-shadow ease-in-out .15s");
+
+  &:focus {
+    border-color: rgba(82,168,236,.8);
+    outline: 0;
+    .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6)");
+  }
+
+  // Disabled and read-only inputs
+  // Note: HTML5 says that inputs under a fieldset > legend:first-child won't be
+  //   disabled if the fieldset is disabled. Due to implementation difficulty,
+  //   we don't honor that edge case; we style them as disabled anyway.
+  &[disabled],
+  &[readonly],
+  fieldset[disabled] & {
+    cursor: not-allowed;
+    background-color: @input-bg-disabled;
+  }
+
+  // Reset height for `textarea`s
+  textarea& {
+    height: auto;
+  }
+}
+
+
+// Form groups
+//
+// Designed to help with the organization and spacing of vertical forms. For
+// horizontal forms, use the predefined grid classes.
+
+.form-group {
+  margin-bottom: 15px;
+}
+
+
+// Checkboxes and radios
+//
+// Indent the labels to position radios/checkboxes as hanging controls.
 
-// Indent the labels to position radios/checkboxes as hanging
 .radio,
 .checkbox {
   display: block;
@@ -217,8 +212,10 @@ textarea {
 
 
 
-// INPUT SIZES
-// -----------
+// Form control sizing
+//
+// Relative text size, padding, and border-radii changes for form controls. For
+// horizontal sizing, wrap controls in the predefined grid classes.
 
 select,
 textarea,
@@ -262,8 +259,9 @@ select {
 
 
 
-// FORM FIELD FEEDBACK STATES
-// --------------------------
+// Form control feedback states
+//
+// Apply contextual and semantic states to individual form controls.
 
 // Warning
 .has-warning {
@@ -281,8 +279,10 @@ select {
 
 
 
-// HELP TEXT
-// ---------
+// Help text
+//
+// Apply to any element you wish to create light text for placement immediately
+// below a form control. Use for general help, formatting, or instructional text.
 
 .help-block {
   display: block; // account for any element using help-block