Select vs Radio Buttons and Checkboxes

Question

What's the semantic difference between using a <select> element containing <option> children and, using an <input type="radio"> elements within a <fieldset> parent? Both methods offer the user to select at most one option. The only differences are visual and user-experience-related: the first method shows the user a drop-down menu while the other option shows radio buttons.

Equivalently, what's the difference between <select multiple=""> with <option> children (a select-multiple drop-down) and using <input type="checkbox"> (check boxes)? Again, I don't see any difference in function; only presentation.

I'm just wondering why the HTML spec has both methods for developers to use. If the only difference is in the presentation and in the user experience, shouldn't we only be using one method?

Solution

In general terminology there is no such particular difference between Radio Button and a Select List(Dropdown) but, since the screen space used is proportional to the number of options, if the number of options are between two to seven a web designer goes for using radio buttons, for eight or more options, he/she uses a drop-down list or single-selection list.

Another thing to keep in mind while designing is: If the default option is recommended for most users in most situations, radio buttons might draw more attention to the options than necessary. Consider using a drop-down list if you don't want to draw attention to the options, or you don't want to encourage users to make changes. A drop-down list focuses on the current selection, whereas radio buttons emphasize all options equally.

The same follows for the checkbox and multiselect dropdown.

Comments

[Pavlo]

Same question from the UX POV: ux.stackexchange.com/questions/456/…

[feklee]

Where does the limit to seven come from?

[Umang Mehta]

It is just a general following. According to general concepts, one should use this strayegy. Else you can use as many radios and as many checkboxes as you want. No one will stop you from doing so. But design won't be user friendly.

[Umang Mehta]

msdn.microsoft.com/en-us/library/windows/desktop/aa511488.as‌​px refer these link.

[feklee]

Those are guidelines for Windows desktop application development. Your answer makes it sound like these guidelines are a rigid rule for web development, which is not true.

[Umang Mehta]

I never said it should be followed rigidly. You are taking this your way. What I said was just you are suggested to follow, not forced to. Just read the last comment carefully, it was always a guideline, if you wish to follow you do, if you don't wish to you don't.

[Umang Mehta]

I always mentioned it, that there is no compulsion, you took it other way. And don't just vote down because you are unable to understand.

[feklee]

Well you write "if the number of options are between two to seven a web designer goes for using radio buttons, for eight or more options, he/she uses a drop-down list or single-selection list." I suggest you make clear that this is a suggestion by Microsoft for desktop application development, and add the URL referenced above. It may be a good rule of thumb, but it's definitely not something a web designer in general adheres to.

[Umang Mehta]

You forgot to read the previous part of that statement before a coma.

[Umang Mehta]

I would suggest you to answer the question if you know the right one. There is no point in explaining you as you are not seeing that this was just an explanation and never did I mentioned it that this is a compulsion. Moreover according to the question, the user just needed some knowledge which was specifically solved by the answer, I am unable to understand your dissatisfaction.

[feklee]

Of course, I read the part before the comma. According to my understanding of the English language, it doesn't stop your answer from being misleading.

[papiro]

Your answer is excellent in outlining the different reasonings to using both