HTML表格中包含复选框以选择每一行，这个表格应该放在带有legend元素的fieldset中吗？

Question

Fieldset和legend元素用于组合相关的表单控件。对于“常规”表单，例如“您的详细信息”fieldset，其中包含名字、姓氏等文本输入字段，这很容易理解和应用。

然而，在应用程序的列表页面上，用户选择带有关联复选框的表格行以执行所选行的批量操作时，是否应该使用fieldset和legend元素呢？

例如：

<form>
  <fieldset>
    <legend>Users</legend>
    <table>
      <thead>
        <tr>
          <th></th>
          <th>Name</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><input type="checkbox" name="SelectedItem" value="Anna" /></td>
          <td>Anna</td>
        </tr>
        <tr>
          <td><input type="checkbox" name="SelectedItem" value="Chris" /></td>
          <td>Chris</td>
        </tr>
      </tbody>
    </table>
    <label for="ListAction">Bulk action</label>
    <select id="ListAction" name="ListAction">
      <option value="Nothing" selected="selected">Select action</option>
      <option value="Delete">Delete</option>
      <option value="Suspend">Suspend</option>
    </select>
    <input type="submit" value="Go" name="BulkActionGo" />
  </fieldset>
</form>

https://www.w3.org/TR/WCAG20-TECHS/H71.html指出：“对于相关的单选按钮和复选框，分组控件是最重要的。当一组单选按钮或复选框都提交给同一个命名字段时，它们就是相关的。”

尽管上述示例符合这种情况，但是fieldset / legend似乎并不适用于此用例，因为该用例可能包含大量表格数据 - 以及无关的分页控件 - 而不仅仅是一组简单的表单控件。

- robtree

---

是的，任何东西都可以放在“fieldset”中，它就像表单的通用容器。 - vsync

通常情况下，“提交”按钮不应该在“<fieldset>”中。 - junkfoodjunkie

@junkfoodjunkie 很好的观点，在这种情况下，需要使用定位技巧来在视觉上将提交按钮与其批量操作选择器相关联。 - robtree

编辑：除了批量操作控件外，还有带有“转到”按钮的数字输入字段，可直接跳转到表格数据的特定页面。 - robtree

Answer 1

最简单的解决方案是给每个复选框命名不同的名称，例如使用数组（在PHP中很容易解析）。

<tbody>
 <tr>
   <td><input type="checkbox" name="SelItem[0]" value="Anna" title="Select Anna" /></td>
   <td>Anna</td>
 </tr>
 <tr>
   <td><input type="checkbox" name="SelItem[1]" value="Chris" title="Select Chris" /></td>
   <td>Chris</td>
 </tr> 

这样做可以让辅助技术（以及软件内部或外部的任何算法）明确知道你的意图不是创建与组相关的复选框，而是一组与个人记录相关的复选框。

fieldset在传达指令的情况下非常有用：

<fieldset>
  <legend>Select your favorite Beatles</legent>
  <label><input type="checkbox" nama="fab4" value="John" />John</label>
  <label><input type="checkbox" nama="fab4" value="Paul" />Paul</label>
  <label><input type="checkbox" nama="fab4" value="George" />George</label>
  <label><input type="checkbox" nama="fab4" value="Ringo" />Ringo</label>
</fieldset>

如果您想指定有关单个记录的特征，则意图是不同的，复选框名称可能与行相关，而不是列。

<div class="group">
  <div class="member">
    <div class="name">John</div>
    <label><input type="checkbox" name="john[is_singer]" value="1" />Sing</label>
    <label><input type="checkbox" name="john[play_guitar]" value="1" />Play guitar</label>
  </div>
  <div class="member">
    <div class="name">Paul</div>
    <label><input type="checkbox" name="paul[is_singer]" value="1" />Sing</label>
    <label><input type="checkbox" name="paul[play_guitar]" value="1" />Play guitar</label>
  </div>
</div>

这将使辅助技术能够轻松处理表单，而无需使用任何冗余的fieldset。

- Adam

Answer 2

不需要将它包含在

中。如果你想要应用样式或在 JavaScript 中引用它，可以将其放在

中，但在这种情况下

没有任何实际应用。

- amaclean

---

fieldset 用于包装表单控件元素，在表单中它们总是有着实际的应用，这正是它们存在的目的。 - albert

应该始终使用<fieldset>，而不是像<div>这样的无描述性容器，因为<fieldset>具有语义意义，而<div>则没有。上述建议在可访问性和语义方面都非常糟糕。 - junkfoodjunkie

对不起，我误解了问题，是的，使用fieldset是合适的。 - amaclean

请随意删除您的回答并恢复您的声誉。 - undefined