title: Why is my HTML id attribute invalid, when I have 4x the same id plus a counter?
body: <p>I have a form with a group of 4 radio buttons and for some reason unknown to me, my fourth radio does not work...</p>
  
  <p>JSBIN here: <a href="http://jsbin.com/ofuhaw/1265/edit" rel="nofollow">radio madness</a>  </p>
  
  <p>I ran the code through the W3C validator and it complains that on the 4th radio the <code>label</code> element must refer to a <code>form input</code>.</p>
  
  <p>Looking at my 3rd and 4th radio labels and input...</p>
  
  <pre><code>    &lt;label for="dyno_fe7ee1e9-6005-69e7-6205-5265c866f79f_content_type_2"&gt;Structured Text&lt;/label&gt;
      &lt;input type="radio" id="dyno_fe7ee1e9-6005-69e7-6205-5265c866f79f_content_type_2" name="dyno_fe7ee1e9-6005-69e7-6205-5265c866f79f_content_type" value="text/structured"&gt;
  </code></pre>
  
  <p>This works, while this:</p>
  
  <pre><code>    &lt;label for="dyno_fe7ee1e9-6005-69e7-6205-5265c866fa79f_content_type_3" data-i18n=""&gt;reStructuredText&lt;/label&gt;
      &lt;input type="radio" id="dyno_fe7ee1e9-6005-69e7-620a5-5265c866f79f_content_type_3"  name="dyno_fe7ee1e9-6005-69e7-6205-5265c866f79f_content_type" value="text/x-rst"&gt;
  </code></pre>
  
  <p>fails. It must be something related to the <code>id-attribute</code> because if I just use <code>a, b, c</code> as <code>id</code>, the code passes. I have looked up <code>id</code> limits and it cannot be a length issue, plus I'm starting with a character, so for me it's ok.</p>
  
  <p><strong>Question:</strong><br>
  Why is the <code>id</code> attribute of the 4th radio button invalid, when the other three are working ok?</p>
  
  <p>Thanks for enlightenment...</p>