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

Question

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).

Answer 1

Alternatives I used in past are:

1) For small number of items use a checkbox list. The checkboxes are much more intuitive and simple to use, but for large number of items it can became an issue. Still, when the number of items is growing you can add a:

<div style="overflow: scroll" />

with a fixed height.

2) For very large number of items it becomes difficult to see what is really selected especially when there are few items actually selected. In this case two lists side by side with the possibility to move items from one to another is a much better approach.

3) When the number of items is not very big but greater than a few, I used a dropdown with checkboxes build in-house that has the advantage of occupying only a small space. Something like this might be of help.