HTML: Using The LABEL Tag To Increase Radio/Checkbox Usability

So, you have a long, drawn out form with multiple radio buttons.

So while this is a standard looking series of radiobuttons, the usability is hindered by default since the user must aim and click on the radio button itself.

This is where the label tag comes in.

Using the following code instead:

<table>
  <tr>
    <td style="padding-right: 10px;">
      <input type="radio" name="id" value="1" id="1">
      <label for="1">Value Of 1</label>
    </td>
  </tr>
  <tr>
    <td>
      <input type="radio" name="id" value="2" id="2">
      <label for="2">Value Of 2</label>
    </td>
  </tr>
  <tr>
    <td>
      <input type="radio" name="id" value="3" id="3">
      <label for="3">Value Of 3</label>
    </td>
  </tr>
</table>

This effectively links the textual description of each radio button to the radio button itself, so the user can click on the radio button or the label to get the desired click effect, as follows: