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?

Answer 1

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.