title: Using the HTML 'label' tag with radio buttons
body: <p>Does the <code>label</code> tag work with radio buttons?  If so, how do you use it?  I have a form that displays like this:</p>
  
  <pre><code>First Name: (text field)
  Hair Color: (color drop-down)
  Description: (text area)
  Salutation: (radio buttons for Mr., Mrs., Miss)
  </code></pre>
  
  <p>I'd like to use the <code>label</code> tag for each label in the left column to define its connection to the appropriate control in the right column.  But If I use a radio button, the spec seems to indicate that suddenly the actual "Salutation" label for the form control no longer belongs in the <code>label</code> tag, but rather the options "Mr., Mrs., etc." go in the <code>label</code> tag.</p>
  
  <p>I've always been a fan of accessibility and the semantic web, but this design doesn't make sense to me.  The <code>label</code> tag explicitly declares labels.  The <code>option</code> tag selection options.  How do you declare a <code>label</code> on the actual label for a set of radio buttons?</p>
  
  <p><strong>UPDATE:</strong>
  Here is an example with code:</p>
  
  <pre><code>&lt;tr&gt;&lt;th&gt;&lt;label for"sc"&gt;Status:&lt;/label&gt;&lt;/th&gt;
      &lt;td&gt;&amp;#160;&lt;/td&gt;
      &lt;td&gt;&lt;select name="statusCode" id="sc"&gt;
              &lt;option value="ON_TIME"&gt;On Time&lt;/option&gt;
              &lt;option value="LATE"&gt;Late&lt;/option&gt;
          &lt;/select&gt;&lt;/td&gt;&lt;/tr&gt;
  </code></pre>
  
  <p>This works great.  But unlike other form controls, radio buttons have a separate field for each value:</p>
  
  <pre><code>&lt;tr&gt;&lt;th align="right"&gt;&lt;label for="???"&gt;Activity:&lt;/label&gt;&lt;/th&gt;
      &lt;td&gt;&amp;#160;&lt;/td&gt;
      &lt;td align="left"&gt;&lt;input type="radio" name="es" value="" id="es0" /&gt; Active &amp;#160;
          &lt;input type="radio" name="es" value="ON_TIME" checked="checked" id="es1" /&gt; Completed on Time &amp;#160;
          &lt;input type="radio" name="es" value="LATE" id="es2" /&gt; Completed Late &amp;#160;
          &lt;input type="radio" name="es" value="CANCELED" id="es3" /&gt; Canceled&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>What to do?</p>