我有一个 HTML 复选框列表,我想以以下格式显示:
单击所有适用的: 标题 A 标题 B 选项1 [ ] [ ] 选项 2 [ ] [ ] 选项 3 [ ] [ ]
我想知道在语义上对此进行编码的最佳方法是什么?
我看过一个关于语义正确复选框的相关问题,但这没有考虑到标题。
有任何想法吗?
我有一个 HTML 复选框列表,我想以以下格式显示:
单击所有适用的: 标题 A 标题 B 选项1 [ ] [ ] 选项 2 [ ] [ ] 选项 3 [ ] [ ]
我想知道在语义上对此进行编码的最佳方法是什么?
我看过一个关于语义正确复选框的相关问题,但这没有考虑到标题。
有任何想法吗?
标记的行和列?这几乎可以肯定是表格是正确的情况。
想象一下,一旦用户做出了选择并提交了表单,您就可以将他们的选择显示给他们。使用表格来显示收集的数据显然是正确的,因此使用表格来显示收集数据的表格是正确的。
我建议表是正确的语义结构,因为复选框的含义取决于它出现的行和列。
想一想您将如何显示这组 1 和 0:您将在表格中执行此操作。您所做的只是使单元格可编辑。
我比开始写这篇文章时更加确信。表是正确的结构。
从语义上讲,这个布局在我看来就像一个表格,所以如果你真的需要使用这个布局,你应该把它标记为一个表格。(使用 th 表示标题和选项,使用 td 表示包含复选框的单元格。)
但是,生成的表单将很难使用。没有一个文本适合用作每个复选框的标签,因此用户将被迫查找并单击复选框本身的微小活动区域。
我的建议是使用两组选项,如下所示:
<fieldset><legend>Title 1</legend>
<input type="checkbox" id="t1o1"><label for="t1o1">Option 1</label>
<input type="checkbox" id="t1o2"><label for="t1o2">Option 2</label>
...
</fieldset>
<fieldset><legend>Title 2</legend>
...
<input type="checkbox" id="t3o2"><label for="t2o3">Option 2</label>
<input type="checkbox" id="t2o3"><label for="t2o3">Option 3</label>
</fieldset>
是的,这意味着重复你的一些文本,这在一定程度上阻碍了可维护性;然而,我认为对于一种形式,可用性应该胜过可维护性。
表格是最简单的方法,但我们知道表格应该用于数据。
所以我会使用 div 构造:
+---style="width:XXXpx"--------------------------------------------------+
|+---style="width:100%"-------------------------------------------------+|
|| +class=opt++class=opt+||
|| | title a || title b |||
|| +---------++---------+||
|+----------------------------------------------------------------------+|
|+---style="width:100%"-------------------------------------------------+|
||+----------------------------------------------++class=opt++class=opt+||
||| Option 1 || [x] || [x] |||
||+----------------------------------------------++---------++---------+||
|+----------------------------------------------------------------------+|
| //repeat for every option |
+------------------------------------------------------------------------+
一切都应该进入一个CSS。(还有上面的“内联”宽度定义)
.opt {
float:right; width: 10%; /*probably*/ z-index: 99;
/*edit2:*/ position: relative;
}
我不确定这是否有效,我会这样尝试。
编辑:啊,这些框是“div”,顺便说一句。