21

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?

4

1 回答 1

30

在一般术语中，单选按钮和选择列表（下拉菜单）之间没有特别的区别，但是，由于使用的屏幕空间与选项的数量成正比，如果选项的数量在2 到 7之间，则网页设计师会使用单选按钮，对于八个或更多选项，他/她使用下拉列表或单选列表。

设计时要记住的另一件事是：如果在大多数情况下为大多数用户推荐默认选项，则单选按钮可能会引起对选项的更多关注，而不是必要的。如果您不想引起对选项的注意，或者不想鼓励用户进行更改，请考虑使用下拉列表。下拉列表侧重于当前选择，而单选按钮同样强调所有选项。

复选框和多选下拉菜单也是如此。

于 2013-09-07T18:43:47.030 回答