use unique IDs for input feedback examples so HTML validates

diff --git a/css.html b/css.html
index 7f813df57b908d1fd664ecc5f718208d608a3d52..cd233ef2ab23fa2ee7da6b0de87a098233ac015d 100644 (file)
--- a/css.html
+++ b/css.html
@@ -1965,31 +1965,31 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <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">
+          <label class="control-label" for="inputSuccess1">Input with success</label>
+          <input type="text" class="form-control" id="inputSuccess1">
         </div>
         <div class="form-group has-warning">
-          <label class="control-label" for="inputWarning">Input with warning</label>
-          <input type="text" class="form-control" id="inputWarning">
+          <label class="control-label" for="inputWarning1">Input with warning</label>
+          <input type="text" class="form-control" id="inputWarning1">
         </div>
         <div class="form-group has-error">
-          <label class="control-label" for="inputError">Input with error</label>
-          <input type="text" class="form-control" id="inputError">
+          <label class="control-label" for="inputError1">Input with error</label>
+          <input type="text" class="form-control" id="inputError1">
         </div>
       </form>
     </div><!-- /.bs-example -->
 {% highlight html %}
 <div class="form-group has-success">
-  <label class="control-label" for="inputSuccess">Input with success</label>
-  <input type="text" class="form-control" id="inputSuccess">
+  <label class="control-label" for="inputSuccess1">Input with success</label>
+  <input type="text" class="form-control" id="inputSuccess1">
 </div>
 <div class="form-group has-warning">
-  <label class="control-label" for="inputWarning">Input with warning</label>
-  <input type="text" class="form-control" id="inputWarning">
+  <label class="control-label" for="inputWarning1">Input with warning</label>
+  <input type="text" class="form-control" id="inputWarning1">
 </div>
 <div class="form-group has-error">
-  <label class="control-label" for="inputError">Input with error</label>
-  <input type="text" class="form-control" id="inputError">
+  <label class="control-label" for="inputError1">Input with error</label>
+  <input type="text" class="form-control" id="inputError1">
 </div>
 {% endhighlight %}
 
@@ -1998,36 +1998,36 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <div class="bs-example">
       <form role="form">
         <div class="form-group has-success has-feedback">
-          <label class="control-label" for="inputSuccess">Input with success</label>
-          <input type="text" class="form-control" id="inputSuccess">
+          <label class="control-label" for="inputSuccess2">Input with success</label>
+          <input type="text" class="form-control" id="inputSuccess2">
           <span class="glyphicon glyphicon-ok form-control-feedback"></span>
         </div>
         <div class="form-group has-warning has-feedback">
-          <label class="control-label" for="inputWarning">Input with warning</label>
-          <input type="text" class="form-control" id="inputWarning">
+          <label class="control-label" for="inputWarning2">Input with warning</label>
+          <input type="text" class="form-control" id="inputWarning2">
           <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
         </div>
         <div class="form-group has-error has-feedback">
-          <label class="control-label" for="inputError">Input with error</label>
-          <input type="text" class="form-control" id="inputError">
+          <label class="control-label" for="inputError2">Input with error</label>
+          <input type="text" class="form-control" id="inputError2">
           <span class="glyphicon glyphicon-remove form-control-feedback"></span>
         </div>
       </form>
     </div>
 {% highlight html %}
 <div class="form-group has-success has-feedback">
-  <label class="control-label" for="inputSuccess">Input with success</label>
-  <input type="text" class="form-control" id="inputSuccess">
+  <label class="control-label" for="inputSuccess2">Input with success</label>
+  <input type="text" class="form-control" id="inputSuccess2">
   <span class="glyphicon glyphicon-ok form-control-feedback"></span>
 </div>
 <div class="form-group has-warning has-feedback">
-  <label class="control-label" for="inputWarning">Input with warning</label>
-  <input type="text" class="form-control" id="inputWarning">
+  <label class="control-label" for="inputWarning2">Input with warning</label>
+  <input type="text" class="form-control" id="inputWarning2">
   <span class="glyphicon glyphicon-warning-sign form-control-feedback"></span>
 </div>
 <div class="form-group has-error has-feedback">
-  <label class="control-label" for="inputError">Input with error</label>
-  <input type="text" class="form-control" id="inputError">
+  <label class="control-label" for="inputError2">Input with error</label>
+  <input type="text" class="form-control" id="inputError2">
   <span class="glyphicon glyphicon-remove form-control-feedback"></span>
 </div>
 {% endhighlight %}
@@ -2036,9 +2036,9 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <div class="bs-example">
       <form class="form-horizontal" role="form">
         <div class="form-group has-success has-feedback">
-          <label class="control-label col-sm-3" for="inputSuccess">Input with success</label>
+          <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
           <div class="col-sm-9">
-            <input type="text" class="form-control" id="inputSuccess">
+            <input type="text" class="form-control" id="inputSuccess3">
             <span class="glyphicon glyphicon-ok form-control-feedback"></span>
           </div>
         </div>
@@ -2047,9 +2047,9 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% highlight html %}
 <form class="form-horizontal" role="form">
   <div class="form-group has-success has-feedback">
-    <label class="control-label col-sm-3" for="inputSuccess">Input with success</label>
+    <label class="control-label col-sm-3" for="inputSuccess3">Input with success</label>
     <div class="col-sm-9">
-      <input type="text" class="form-control" id="inputSuccess">
+      <input type="text" class="form-control" id="inputSuccess3">
       <span class="glyphicon glyphicon-ok form-control-feedback"></span>
     </div>
   </div>
@@ -2059,8 +2059,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
     <div class="bs-example">
       <form class="form-inline" role="form">
         <div class="form-group has-success has-feedback">
-          <label class="control-label" for="inputSuccess">Input with success</label>
-          <input type="text" class="form-control" id="inputSuccess">
+          <label class="control-label" for="inputSuccess4">Input with success</label>
+          <input type="text" class="form-control" id="inputSuccess4">
           <span class="glyphicon glyphicon-ok form-control-feedback"></span>
         </div>
       </form>
@@ -2068,8 +2068,8 @@ For example, <code>&lt;section&gt;</code> should be wrapped as inline.
 {% highlight html %}
 <form class="form-inline" role="form">
   <div class="form-group has-success has-feedback">
-    <label class="control-label" for="inputSuccess">Input with success</label>
-    <input type="text" class="form-control" id="inputSuccess">
+    <label class="control-label" for="inputSuccess4">Input with success</label>
+    <input type="text" class="form-control" id="inputSuccess4">
     <span class="glyphicon glyphicon-ok form-control-feedback"></span>
   </div>
 </form>