Tips to improve Usability of HTML forms

Generall speaking web form usability is terrible, but there is a couple of simple things you can do to improve it no end.

Use Label Tags

Using label tags means that people can click on the field label to select that element. Try clicking on the word "Muldoon" below. The left hand radio box should be highlighted.

Muldoon Shipley

<label for="muldoon">Muldoon</label>
<input type="radio" id="muldoon" name="myRadio">

Use the "accesskey" attribute

If you use the accesskey attribute (works on any HTML form element) it means users can navigate your forms easily by keyboard alone. Press "Alt+M" on your keyboard and Muldoon's radio box should be highlighted. It is helpful to show the access key by underlining the letter in the field label.

Muldoon Shipley

<label for="shipley"><u>S</u>hipley</label>
<input type="radio" accesskey="s" id="shipley" name="myRadio">