Question

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似乎仍然不适合这个用例，它可能包含很多表格数据 - 和不相关的分页控件 - 而不是一个简单的集合表格控制。

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

Answer 2

不，没有理由将其包含在字段集中。如果你想应用样式元素或在JavaScript中引用它，你可以把它放在div中，但是在这种情况下，fieldset没有任何实际应用。

带有复选框的HTML表格是否应包含在带有图例元素的字段集中？

2 个答案: