Question

I am creating a small form where the user

1. Enters some text in an input box
2. Chooses from a bunch of options
   regarding the actions that need to
   be taken with the data
3. Clicks a submit button

Disconnect does something similar in a better way:

you can click on any of the five divisions here. This is wonderful because it makes it easier for users to perform the same task and simplifies choose and click to click.

What technology is used to display such a menu?

Answer 1

A nice way of doing this is – which doesn’t need javascript – is to use radio buttons, but make them invisible. The clickable text and icon go inside of the label for each radio button, so you can click the label or icon to select the radio button.

This ensures a few important things:

• Only one item can be selected
• The selection is passed back with the form
• The browser’s native form handling still works
• Accessibility options still work

You do have to be careful to make the labels obviously clickable, since you lose the visual cue of having the radio buttons visible.

IE6 & 7 also require a hack – they have a weird behaviour that a display:none or visibility:hidden radio button or checkbox cannot be selected by clicking its label.

Here’s an example: http://www.spookandpuff.com/examples/clickableToggles.html

(I haven’t included the icons – you can easily add these by setting them as the background in CSS for each item (don’t use <img> tags).

Edit Oh man – I just read the question properly! Sorry, you want the behaviour to be ‘choose’ rather than ‘choose and submit’… An easy way to do this is to add some javascript to the inputs to have them auto-submit the forms when they’re selected. I’ve updated the example to show this.