Mag*_*ith 9 html usability html-select
我知道很多人每天都在使用计算机,他们不知道如何在HTML选择框/列表中选择多个项目.我不想再在我的页面中使用此控件了:
Please pick 3 options:
<select name="categories" size="10" multiple="yes">
那么你建议用户友好的替代品呢？也许有10个复选框...或者可能只是让每个选项都在一个彩色块中,当它们点击选择它时会改变颜色？当我认为我目前的20个选项列表最终可能增长到50时,这会变得更加混乱.
无论我选择哪种方式,验证它(使用Javascript)都会很痛苦,以确保此人选择至少1项且不超过3项.这不是要检测他们选择了多少选项,问题更多的是关于如何以友好的方式向用户传达这一点!
编辑: 我想我可以使用标签,就像在stackoverflow上这样,但我觉得如果用户是非技术性的(而其中一半将是),这些不太合适.
Ale*_*ris 13
我过去使用的替代品是:
1)对于少量项目,使用复选框列表.复选框更加直观且易于使用,但对于大量项目,它可能成为一个问题.但是,当项目数量增加时,您可以添加:
<div style="overflow: scroll" />
具有固定的高度.
2)对于非常大量的项目,特别是当实际选择的项目很少时,很难看到真正选择的项目.在这种情况下,两个并排的列表可以将项目从一个移动到另一个是一种更好的方法.
3)当项目数量不是很大但大于几个时,我使用了一个带有内部复选框的下拉列表,其优点是占用的空间很小.喜欢的东西,这可能会有帮助.
我建议使用两个列表框,一个包含可用的列表框,另一个包含选定的列表框.单击或双击其中一个列表中的项目应将该项目移动到另一个列表中.为方便起见,我还包括两个"移动"按钮来做同样的事情.对于Web应用程序以及桌面应用程序中的普通用户来说,这种方法效果非常好.
您可以只使用手动项目列表（例如简单链接），这些项目具有手动取消选择/选择的 Javascript onclick 行为。基本上通过在两个值之间更改 css 类，并在提交期间检查这些 css （或其他一些属性）来确定选择。
这将允许用户简单地通过单击选择一个项目，并通过单击取消选择，而不是标准的 Ctrl+单击要求。