« Back to code index... | Contact me regarding this code...

Tabable Radio Buttons

The purpose of this code is to demonstrate that with JavaScript you could enhance a form so that it's possible to tab through all available radio buttons without losing the grouping of typical HTML.

Note: I know that this form will work on browsers without JavaScript but that it'll require much more logic on the back-end to get the selected value—not to mention without JS it'll be possible to select more than one value.

This is a conventional form with regular radio buttons.

Start Here:
Group 1 Radio 1 Radio 2 Radio 3
Group 2 Radio 1 Radio 2 Radio 3
The following form uses JavaScript so that you can tab through all the radio buttons.
Start Here:
Group 1 Radio 1 Radio 2 Radio 3
Group 2 Radio 1 Radio 2 Radio 3

Valid XHTML 1.1!