HTML troolean form element

Question

What's the best way to simulate a troolean variable with an HTML form?

Specifically, I've got a column that is to be sorted, so it can have three states: unsorted, ascending, and descending. I want to store the state in a form so it is recovered after page submission.

Is there an elegant way of doing this?

EDIT

Javascript is encouraged here. Right now my solution is a hidden input, with a value of 0,1, or 2. The value is changed when the sort button is clicked, and submitted with the form. But perhaps there's a better way?

EDIT

This question has apparently already been asked: Tri-state Check box in HTML?. Voting to close.

Answer 1

I find the way the top checkbox of gmail is working rather intuitive:

• if no items are selected, the checkbox is empty
• if at least an item is selected, the checkbox is selected and has an opacity of 0.5
• if all items are selected, the checkbox is selected with opacity 1

You don't need an image like the referenced page about the Tristate checkbox.

Answer 2

Either using 3 radio boxes or a select list with 3 elements.

Answer 3

Don't go for the magic numbers. As long as the data's going as text over HTTP anyway, you might as well just use values of "ascending", "descending", and "unsorted" or empty.

And a radio button would probably be the thing. Select is overkill for three elements. If you want a different interface, you can use javascript to hide the radio buttons for those with scripting enabled.