Redundant role="form" on <form>s

docs/_includes/components/input-groups.html

@@ -22,7 +22,7 @@
   <p>Place one add-on or button on either side of an input. You may also place one on both sides of an input.</p>
   <p><strong class="text-danger">We do not support multiple add-ons on a single side.</strong></p>
   <p><strong class="text-danger">We do not support multiple form-controls in a single input group.</strong></p>
-  <form class="bs-example bs-example-form" role="form">
+  <form class="bs-example bs-example-form">
     <div class="input-group">
       <span class="input-group-addon">@</span>
       <input type="text" class="form-control" placeholder="Username">
@@ -59,7 +59,7 @@
 
   <h2 id="input-groups-sizing">Sizing</h2>
   <p>Add the relative form sizing classes to the <code>.input-group</code> itself and contents within will automatically resize—no need for repeating the form control size classes on each element.</p>
-  <form class="bs-example bs-example-form" role="form">
+  <form class="bs-example bs-example-form">
     <div class="input-group input-group-lg">
       <span class="input-group-addon">@</span>
       <input type="text" class="form-control" placeholder="Username">
@@ -182,7 +182,7 @@
 
   <h2 id="input-groups-buttons-dropdowns">Buttons with dropdowns</h2>
   <p></p>
-  <form class="bs-example bs-example-form" role="form">
+  <form class="bs-example bs-example-form">
     <div class="row">
       <div class="col-lg-6">
         <div class="input-group">
@@ -252,7 +252,7 @@
 {% endhighlight %}
 
   <h2 id="input-groups-buttons-segmented">Segmented buttons</h2>
-  <form class="bs-example bs-example-form" role="form">
+  <form class="bs-example bs-example-form">
     <div class="row">
       <div class="col-lg-6">
         <div class="input-group">

docs/_includes/css/forms.html

@@ -4,7 +4,7 @@
   <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>
   <div class="bs-example">
-    <form role="form">
+    <form>
       <div class="form-group">
         <label for="exampleInputEmail1">Email address</label>
         <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
@@ -27,7 +27,7 @@
     </form>
   </div><!-- /example -->
 {% highlight html %}
-<form role="form">
+<form>
   <div class="form-group">
     <label for="exampleInputEmail1">Email address</label>
     <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
@@ -66,7 +66,7 @@
     <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. There are further alternative methods of providing a label for assistive technologies, such as the <code>aria-label</code>, <code>aria-labelledby</code> or <code>title</code> attribute. If none of these is present, screen readers may resort to using the <code>placeholder</code> attribute, if present, but note that use of <code>placeholder</code> as a replacement for other labelling methods is not advised.</p>
   </div>
   <div class="bs-example">
-    <form class="form-inline" role="form">
+    <form class="form-inline">
       <div class="form-group">
         <label class="sr-only" for="exampleInputEmail2">Email address</label>
         <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
@@ -91,7 +91,7 @@
     </form>
   </div><!-- /example -->
 {% highlight html %}
-<form class="form-inline" role="form">
+<form class="form-inline">
   <div class="form-group">
     <label class="sr-only" for="exampleInputEmail2">Email address</label>
     <input type="email" class="form-control" id="exampleInputEmail2" placeholder="Enter email">
@@ -120,7 +120,7 @@
   <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>
   <div class="bs-example">
-    <form class="form-horizontal" role="form">
+    <form class="form-horizontal">
       <div class="form-group">
         <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
         <div class="col-sm-10">
@@ -150,7 +150,7 @@
     </form>
   </div><!-- /.bs-example -->
 {% highlight html %}
-<form class="form-horizontal" role="form">
+<form class="form-horizontal">
   <div class="form-group">
     <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
     <div class="col-sm-10">
@@ -191,7 +191,7 @@
     <p>Inputs will only be fully styled if their <code>type</code> is properly declared.</p>
   </div>
   <div class="bs-example">
-    <form role="form">
+    <form>
       <input type="text" class="form-control" placeholder="Text input">
     </form>
   </div><!-- /.bs-example -->
@@ -206,7 +206,7 @@
   <h3>Textarea</h3>
   <p>Form control which supports multiple lines of text. Change <code>rows</code> attribute as necessary.</p>
   <div class="bs-example">
-    <form role="form">
+    <form>
       <textarea class="form-control" rows="3" placeholder="Textarea"></textarea>
     </form>
   </div><!-- /.bs-example -->
@@ -219,7 +219,7 @@
   <p>A checkbox or radio with the <code>disabled</code> attribute will be styled appropriately. To have the <code>&lt;label&gt;</code> for the checkbox or radio also display a "not-allowed" cursor when the user hovers over the label, add the <code>.disabled</code> class to your <code>.radio</code>, <code>.radio-inline</code>, <code>.checkbox</code>, <code>.checkbox-inline</code>, or <code>&lt;fieldset&gt;</code>.</p>
   <h4>Default (stacked)</h4>
   <div class="bs-example">
-    <form role="form">
+    <form>
       <div class="checkbox">
         <label>
           <input type="checkbox" value="">
@@ -290,7 +290,7 @@
   <h4>Inline checkboxes and radios</h4>
   <p>Use the <code>.checkbox-inline</code> or <code>.radio-inline</code> classes on a series of checkboxes or radios for controls that appear on the same line.</p>
   <div class="bs-example">
-    <form role="form">
+    <form>
       <label class="checkbox-inline">
         <input type="checkbox" id="inlineCheckbox1" value="option1"> 1
       </label>
@@ -302,7 +302,7 @@
       </label>
     </form>
     <br>
-    <form role="form">
+    <form>
       <label class="radio-inline">
         <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="option1"> 1
       </label>
@@ -339,7 +339,7 @@
   <h4>Checkboxes and radios without label text</h4>
   <p>Should you have no text within the <code>&lt;label&gt;</code>, the input is positioned as you'd expect. <strong>Currently only works on non-inline checkboxes and radios.</strong> Remember to still provide some form of label for assistive technologies (for instance, using <code>aria-label</code>).</p>
   <div class="bs-example">
-    <form role="form">
+    <form>
       <div class="checkbox">
         <label>
           <input type="checkbox" id="blankCheckbox" value="option1" aria-label="Checkbox without label text">
@@ -368,7 +368,7 @@
   <h3>Selects</h3>
   <p>Use the default option, or add <code>multiple</code> to show multiple options at once.</p>
   <div class="bs-example">
-    <form role="form">
+    <form>
       <select class="form-control">
         <option>1</option>
         <option>2</option>
@@ -408,7 +408,7 @@
   <h2 id="forms-controls-static">Static control</h2>
   <p>When you need to place plain text next to a form label within a form, use the <code>.form-control-static</code> class on a <code>&lt;p&gt;</code>.</p>
   <div class="bs-example">
-    <form class="form-horizontal" role="form">
+    <form class="form-horizontal">
       <div class="form-group">
         <label class="col-sm-2 control-label">Email</label>
         <div class="col-sm-10">
@@ -424,7 +424,7 @@
     </form>
   </div><!-- /.bs-example -->
 {% highlight html %}
-<form class="form-horizontal" role="form">
+<form class="form-horizontal">
   <div class="form-group">
     <label class="col-sm-2 control-label">Email</label>
     <div class="col-sm-10">
@@ -440,7 +440,7 @@
 </form>
 {% endhighlight %}
   <div class="bs-example">
-    <form class="form-inline" role="form">
+    <form class="form-inline">
       <div class="form-group">
         <label class="sr-only">Email</label>
         <p class="form-control-static">email@example.com</p>
@@ -453,7 +453,7 @@
     </form>
   </div>
 {% highlight html %}
-<form class="form-inline" role="form">
+<form class="form-inline">
   <div class="form-group">
     <label class="sr-only">Email</label>
     <p class="form-control-static">email@example.com</p>
@@ -469,7 +469,7 @@
   <h2 id="forms-control-focus">Focus state</h2>
   <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>
   <div class="bs-example">
-    <form role="form">
+    <form>
       <input class="form-control" id="focusedInput" type="text" value="Demonstrative focus state">
     </form>
   </div>
@@ -482,7 +482,7 @@
   <h2 id="forms-control-disabled">Disabled state</h2>
   <p>Add the <code>disabled</code> boolean attribute on an input to prevent user input and trigger a slightly different look.</p>
   <div class="bs-example">
-    <form role="form">
+    <form>
       <input class="form-control" id="disabledInput" type="text" placeholder="Disabled input here…" disabled>
     </form>
   </div><!-- /.bs-example -->
@@ -504,7 +504,7 @@
   </div>
 
   <div class="bs-example">
-    <form role="form">
+    <form>
       <fieldset disabled>
         <div class="form-group">
           <label for="disabledTextInput">Disabled input</label>
@@ -526,7 +526,7 @@
     </form>
   </div><!-- /.bs-example -->
 {% highlight html %}
-<form role="form">
+<form>
   <fieldset disabled>
     <div class="form-group">
       <label for="disabledTextInput">Disabled input</label>
@@ -552,7 +552,7 @@
   <h2 id="forms-control-readonly">Readonly state</h2>
   <p>Add the <code>readonly</code> boolean attribute on an input to prevent user input and style the input as disabled.</p>
   <div class="bs-example">
-    <form role="form">
+    <form>
       <input class="form-control" type="text" placeholder="Readonly input here…" readonly>
     </form>
   </div><!-- /.bs-example -->
@@ -571,7 +571,7 @@
   </div>
 
   <div class="bs-example">
-    <form role="form">
+    <form>
       <div class="form-group has-success">
         <label class="control-label" for="inputSuccess1">Input with success</label>
         <input type="text" class="form-control" id="inputSuccess1">
@@ -662,7 +662,7 @@
     <p>Although the following examples already mention the validation state of their respective form controls in the <code>&lt;label&gt;</code> text itself, the above technique (using <code>.sr-only</code> text and <code>aria-describedby</code>) has been included for illustrative purposes.</p>
   </div>
   <div class="bs-example">
-    <form role="form">
+    <form>
       <div class="form-group has-success has-feedback">
         <label class="control-label" for="inputSuccess2">Input with success</label>
         <input type="text" class="form-control" id="inputSuccess2" aria-describedby="inputSuccess2Status">
@@ -706,7 +706,7 @@
 
   <h4>Optional icons in horizontal and inline forms</h4>
   <div class="bs-example">
-    <form class="form-horizontal" role="form">
+    <form class="form-horizontal">
       <div class="form-group has-success has-feedback">
         <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
         <div class="col-sm-9">
@@ -718,7 +718,7 @@
     </form>
   </div>
 {% highlight html %}
-<form class="form-horizontal" role="form">
+<form class="form-horizontal">
   <div class="form-group has-success has-feedback">
     <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
     <div class="col-sm-9">
@@ -731,7 +731,7 @@
 {% endhighlight %}
 
   <div class="bs-example">
-    <form class="form-inline" role="form">
+    <form class="form-inline">
       <div class="form-group has-success has-feedback">
         <label class="control-label" for="inputSuccess4">Input with success</label>
         <input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
@@ -741,7 +741,7 @@
     </form>
   </div>
 {% highlight html %}
-<form class="form-inline" role="form">
+<form class="form-inline">
   <div class="form-group has-success has-feedback">
     <label class="control-label" for="inputSuccess4">Input with success</label>
     <input type="text" class="form-control" id="inputSuccess4" aria-describedby="inputSuccess4Status">
@@ -777,7 +777,7 @@
   <h3>Height sizing</h3>
   <p>Create taller or shorter form controls that match button sizes.</p>
   <div class="bs-example bs-example-control-sizing">
-    <form role="form">
+    <form>
       <div class="controls">
         <input class="form-control input-lg" type="text" placeholder=".input-lg">
         <input type="text" class="form-control" placeholder="Default input">
@@ -808,7 +808,7 @@
   <h3>Horizontal form group sizes</h3>
   <p>Quickly size labels and form controls within <code>.form-horizontal</code> by adding <code>.form-group-lg</code> or <code>.form-group-sm</code>.</p>
   <div class="bs-example">
-    <form class="form-horizontal" role="form">
+    <form class="form-horizontal">
       <div class="form-group form-group-lg">
         <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
         <div class="col-sm-10">
@@ -824,7 +824,7 @@
     </form>
   </div><!-- /.bs-example -->
 {% highlight html %}
-<form class="form-horizontal" role="form">
+<form class="form-horizontal">
   <div class="form-group form-group-lg">
     <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label>
     <div class="col-sm-10">
@@ -844,7 +844,7 @@
   <h3>Column sizing</h3>
   <p>Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.</p>
   <div class="bs-example">
-    <form role="form">
+    <form>
       <div class="row">
         <div class="col-xs-2">
           <input type="text" class="form-control" placeholder=".col-xs-2">
@@ -879,7 +879,7 @@
     <p>Help text should be explicitly associated with the form control it relates to using the <code>aria-describedby</code> attribute. This will ensure that assistive technologies – such as screen readers – will announce this help text when the user focuses or enters the control.</p>
   </div>
   <div class="bs-example">
-    <form role="form">
+    <form>
       <div class="form-group">
         <label for="inputHelpBlock">Input with help text</label>
         <input type="text" id="inputHelpBlock" class="form-control" aria-describedby="helpBlock">

docs/_includes/js/modal.html

@@ -229,7 +229,7 @@
             <h4 class="modal-title" id="exampleModalLabel">New message</h4>
           </div>
           <div class="modal-body">
-            <form role="form">
+            <form>
               <div class="form-group">
                 <label for="recipient-name" class="control-label">Recipient:</label>
                 <input type="text" class="form-control" id="recipient-name">
@@ -262,7 +262,7 @@
         <h4 class="modal-title" id="exampleModalLabel">New message</h4>
       </div>
       <div class="modal-body">
-        <form role="form">
+        <form>
           <div class="form-group">
             <label for="recipient-name" class="control-label">Recipient:</label>
             <input type="text" class="form-control" id="recipient-name">

docs/customize.html

@@ -35,7 +35,7 @@ lead: Customize Bootstrap's components, Less variables, and jQuery plugins to ge
   </div>
 </div><!-- /import -->
 
-<form class="bs-customizer" role="form">
+<form class="bs-customizer">
   <div class="bs-docs-section" id="less-section">
     <button class="btn btn-default toggle" type="button">Toggle all</button>
     <h1 id="less" class="page-header">Less files</h1>

docs/examples/jumbotron/index.html

@@ -41,7 +41,7 @@
           <a class="navbar-brand" href="#">Project name</a>
         </div>
         <div id="navbar" class="navbar-collapse collapse">
-          <form class="navbar-form navbar-right" role="form">
+          <form class="navbar-form navbar-right">
             <div class="form-group">
               <input type="text" placeholder="Email" class="form-control">
             </div>

docs/examples/signin/index.html

@@ -31,7 +31,7 @@
 
     <div class="container">
 
-      <form class="form-signin" role="form">
+      <form class="form-signin">
         <h2 class="form-signin-heading">Please sign in</h2>
         <label for="inputEmail" class="sr-only">Email address</label>
         <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>