i’ve been building all these html form-based user interfaces for my master’s project, and i’ve been using radio buttons for data entry, except they’re so small that they end up violating Fitts’ Law in a major way. usually you can click a radio button’s label to select it, but there didn’t seem to be a way to attach a label to a radio button. until, that is, i discovered the LABEL tag!!!

for example, this HTML code:

<INPUT TYPE=radio NAME=a VALUE=1>radio1
<INPUT TYPE=radio NAME=a VALUE=2>radio2

produces this:

radio1
radio2

labels aren’t clickable…

but this html code:

<INPUT ID=r1 TYPE=radio NAME=b VALUE=1>
<LABEL FOR=r1>radio1</LABEL>
<INPUT ID=r2 TYPE=radio NAME=b VALUE=2>
<LABEL FOR=r2>radio2</LABEL>

produces this:

radio1
radio2

try clicking on the label to select one of the radio buttons.

(sidenote: IE requires use of FOR=idref to explicitly connect labels and controls. with Mozilla, you can just surround the control and label text with the label tags. god i like mozilla.)