Search code examples
htmlusabilityhtml-select

Many people don't know how to multi-select items in a HTML <select> control, so...?


I know many people who use computers every day, who do not know how to select multiple items in a HTML select box/list. I don't want to use this control in my pages any more:

Please pick 3 options:
<select name="categories" size="10" multiple="yes">

So what user-friendly alternatives do you suggest? Perhaps have 10 tickboxes...or maybe just have each option in a coloured block which changes colour when they click to choose it? This gets messier when I consider my current list of 20 options might grow to 50 eventually.

Whatever way I pick it's gonna be a pain to validate it (using Javascript), to make sure the person picks at least 1 item and not more than 3. It's not about detecting how many options they have picked, the problem is more about how to convey this to the user in a friendly way!

Edit: I suppose I could use tags, like right here on stackoverflow, but I feel these are less appropriate if the users are non-technical (and half of them will be).


Solution

  • You could just use a manual list of items (Say as simple links), that have Javascript onclick behavior that deselects/selects manually. Basically by changing the css class between two values, and checking these css (Or some other attribute) during submission to determine the selections.

    This would allow the user to simply select an item by clicking, and deselect by clicking, rather than the standard Ctrl+Click requirement.