Always wrap form examples in .bs-example; add some missing role='form'

css.html

@@ -1446,7 +1446,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
     <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 with <code>.form-control</code> 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" role="form">
+    <div class="bs-example">
+      <form role="form">
         <div class="form-group">
           <label for="exampleInputEmail1">Email address</label>
           <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
@@ -1466,7 +1467,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
           </label>
         </div>
         <button type="submit" class="btn btn-default">Submit</button>
-    </form><!-- /example -->
+      </form>
+    </div><!-- /example -->
 {% highlight html %}
 <form role="form">
   <div class="form-group">
@@ -1502,7 +1504,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       <h4>Always add labels</h4>
       <p>Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the <code>.sr-only</code> class.</p>
     </div>
-    <form class="bs-example form-inline" role="form">
+    <div class="bs-example">
+      <form class="form-inline" role="form">
         <div class="form-group">
           <label class="sr-only" for="exampleInputEmail2">Email address</label>
           <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
@@ -1517,7 +1520,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
           </label>
         </div>
         <button type="submit" class="btn btn-default">Sign in</button>
-    </form><!-- /example -->
+      </form>
+    </div><!-- /example -->
 {% highlight html %}
 <form class="form-inline" role="form">
   <div class="form-group">
@@ -1540,7 +1544,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
     <h2 id="forms-horizontal">Horizontal form</h2>
     <p>Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout by adding <code>.form-horizontal</code> to the form. Doing so changes <code>.form-group</code>s to behave as grid rows, so no need for <code>.row</code>.</p>
-    <form class="bs-example form-horizontal">
+    <div class="bs-example">
+      <form class="form-horizontal">
         <div class="form-group">
           <label for="inputEmail1" class="col-lg-2 control-label">Email</label>
           <div class="col-lg-10">
@@ -1568,6 +1573,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
           </div>
         </div>
       </form>
+    </div><!-- /.bs-example -->
 {% highlight html %}
 <form class="form-horizontal" role="form">
   <div class="form-group">
@@ -1609,18 +1615,22 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       <h4>Type declaration required</h4>
       <p>Inputs will only be fully styled if their <code>type</code> is properly declared.</p>
     </div>
-    <form class="bs-example">
+    <div class="bs-example">
+      <form role="form">
         <input type="text" class="form-control" placeholder="Text input">
       </form>
+    </div><!-- /.bs-example -->
 {% highlight html %}
 <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">
+    <div class="bs-example">
+      <form role="form">
         <textarea class="form-control" rows="3"></textarea>
       </form>
+    </div><!-- /.bs-example -->
 {% highlight html %}
 <textarea class="form-control" rows="3"></textarea>
 {% endhighlight %}
@@ -1628,7 +1638,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <h3>Checkboxes and radios</h3>
     <p>Checkboxes are for selecting one or several options in a list while radios are for selecting one option from many.</p>
     <h4>Default (stacked)</h4>
-    <form class="bs-example">
+    <div class="bs-example">
+      <form role="form">
         <div class="checkbox">
           <label>
             <input type="checkbox" value="">
@@ -1649,6 +1660,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
           </label>
         </div>
       </form>
+    </div><!-- /.bs-example -->
 {% highlight html %}
 <div class="checkbox">
   <label>
@@ -1673,7 +1685,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
     <h4>Inline checkboxes</h4>
     <p>Use <code>.checkbox-inline</code> or <code>.radio-inline</code> class to a series of checkboxes or radios for controls appear on the same line.</p>
-    <form class="bs-example">
+    <div class="bs-example">
+      <form role="form">
         <label class="checkbox-inline">
           <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
         </label>
@@ -1684,6 +1697,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
           <input type="checkbox" id="inlineCheckbox3" value="option3"> 3
         </label>
       </form>
+    </div><!-- /.bs-example -->
 {% highlight html %}
 <label class="checkbox-inline">
   <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
@@ -1698,7 +1712,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
     <h3>Selects</h3>
     <p>Use the default option, or add <code>multiple</code> to show multiple options at once.</p>
-    <form class="bs-example">
+    <div class="bs-example">
+      <form role="form">
         <select class="form-control">
           <option>1</option>
           <option>2</option>
@@ -1715,6 +1730,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
           <option>5</option>
         </select>
       </form>
+    </div><!-- /.bs-example -->
 {% highlight html %}
 <select class="form-control">
   <option>1</option>
@@ -1736,7 +1752,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
     <h2 id="forms-controls-static">Static control</h2>
     <p>When you need to place plain text next to a form label within a horizontal form, use the <code>.form-control-static</code> class on a <code>&lt;p&gt;</code>.</p>
-    <form class="bs-example form-horizontal">
+    <div class="bs-example">
+      <form class="form-horizontal" role="form">
         <div class="form-group">
           <label class="col-lg-2 control-label">Email</label>
           <div class="col-lg-10">
@@ -1750,6 +1767,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
           </div>
         </div>
       </form>
+    </div><!-- /.bs-example -->
 {% highlight html %}
 <form class="form-horizontal" role="form">
   <div class="form-group">
@@ -1773,18 +1791,22 @@ 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">
+    <div class="bs-example">
+      <form role="form">
         <input class="form-control" id="focusedInput" type="text" value="This is focused...">
-    </form>
+      </div>
+    </div>
 {% highlight html %}
 <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">
+    <div class="bs-example">
+      <form role="form">
         <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here…" disabled>
       </form>
+    </div><!-- /.bs-example -->
 {% highlight html %}
 <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here..." disabled>
 {% endhighlight %}
@@ -1802,7 +1824,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
       <p>While Bootstrap will apply these styles in all browsers, Internet Explorer 9 and below don't actually support the <code>disabled</code> attribute on a <code>&lt;fieldset&gt;</code>. Use custom JavaScript to disable the fieldset in these browsers.</p>
     </div>
 
-    <form class="bs-example">
+    <div class="bs-example">
+      <form role="form">
         <fieldset disabled>
           <div class="form-group">
             <label for="disabledTextInput">Disabled input</label>
@@ -1822,6 +1845,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
           <button type="submit" class="btn btn-primary">Submit</button>
         </fieldset>
       </form>
+    </div><!-- /.bs-example -->
 {% highlight html %}
 <form class="form-inline" role="form">
   <fieldset disabled>
@@ -1848,7 +1872,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <h3 id="forms-validation">Validation states</h3>
     <p>Bootstrap includes validation styles for error, warning, and success states on form controls. To use, add <code>.has-warning</code>, <code>.has-error</code>, or <code>.has-success</code> to the parent element. Any <code>.control-label</code>, <code>.form-control</code>, and <code>.help-block</code> within that element will receive the validation styles.</p>
 
-    <form class="bs-example">
+    <div class="bs-example">
+      <form role="form">
         <div class="form-group has-success">
           <label class="control-label" for="inputSuccess">Input with success</label>
           <input type="text" class="form-control" id="inputSuccess">
@@ -1862,6 +1887,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
           <input type="text" class="form-control" id="inputError">
         </div>
       </form>
+    </div><!-- /.bs-example -->
 {% highlight html %}
 <div class="form-group has-success">
   <label class="control-label" for="inputSuccess">Input with success</label>
@@ -1883,8 +1909,9 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
     <h3>Height sizing</h3>
     <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">
+    <div class="bs-example bs-example-control-sizing">
+      <form role="form">
+        <div class="controls">
           <input class="form-control input-lg" type="text" placeholder=".input-lg">
           <input type="text" class="form-control" placeholder="Default input">
           <input class="form-control input-sm" type="text" placeholder=".input-sm">
@@ -1900,6 +1927,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
           </select>
         </div>
       </form>
+    </div><!-- /.bs-example -->
 {% highlight html %}
 <input class="form-control input-lg" type="text" placeholder=".input-lg">
 <input class="form-control" type="text" placeholder="Default input">
@@ -1912,7 +1940,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
     <h3>Column sizing</h3>
     <p>Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.</p>
-    <form class="bs-example" style="padding-bottom: 15px;">
+    <div class="bs-example">
+      <form role="form">
         <div class="row">
           <div class="col-lg-2">
             <input type="text" class="form-control" placeholder=".col-lg-2">
@@ -1925,6 +1954,7 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
           </div>
         </div>
       </form>
+    </div><!-- /.bs-example -->
 {% highlight html %}
 <div class="row">
   <div class="col-lg-2">
@@ -1941,10 +1971,12 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 
     <h2 id="forms-help-text">Help text</h2>
     <p>Block level help text for form controls.</p>
-    <form class="bs-example">
+    <div class="bs-example">
+      <form role="form">
         <input type="text" class="form-control">
         <span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
       </form>
+    </div><!-- /.bs-example -->
 {% highlight html %}
 <span class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
 {% endhighlight %}