作用于 `input` 的 HTML 元素的语义

Question

我有一组checkboxes，结构如下：

<div>
  <div>
    <label><input type="checkbox" value="a1"/>A1</label>
  </div>
  <div>
    <label><input type="checkbox" value="a2"/>A2</label>
  </div>
  ...
</div>

复选框仅用于 UI 控件（不适用于表单提交）。我有一个关联的 html 元素，它有一个 onclick jQuery 函数，可以清除所有复选框。该元素目前只是一个 div。从语义上讲，是否有任何最佳实践可以说明这应该是 button、a（没有 href 值）还是继续是 div？

Answer 1

语义是垂死的渡渡鸟。话虽如此，这是我试图达到的标准，但似乎在很大程度上被忽略了。我只使用最适合任务的任何元素，并且看起来合乎逻辑，通用 div 和 span 是最后要考虑的。我相信从表示和标记中保留代码也是一个主要的 objective，所以使用 addEventListener 而不是像 onclick

这样的属性事件处理程序

片段

var allchx = document.getElementById('allChecks');

allchx.addEventListener('change', function(e) {
  this.checked ? checkUncheck(true) : checkUncheck(false);
}, false);

function checkUncheck(chxBool) {
  var chxList = document.querySelectorAll('input[name^="question"]');
  var qty = chxList.length;
  for (let i = 0; i < qty; i++) {
    chxList[i].checked = chxBool;
  }
}

<form id='survey' name='survey' action='http://httpbin.org/post' method='post'>
  <fieldset class='checkboxSet'>
    <legend>Product Survey</legend>
    <label for='allChecks'>
      <input id='allChecks' type='checkbox'>Check/Uncheck All</label>
    <hr/>
    <ol>
      <li>
        <label for='question1'>
          <input id='question1' name='question1' type='checkbox' value='smoker'>Do you smoke?</label>
      </li>
      <li>
        <label for='question2'>
          <input id='question2' name='question2' type='checkbox' value='lard eater'>Do you eat lard?</label>
      </li>
      <li>
        <label for='question3'>
          <input id='question3' name='question3' type='checkbox' value='potential customer'>Do you have explosive diareha?</label>
      </li>
      <li>
        <label for='question4'>
          <input id='question4' name='question4' type='checkbox' value='definite customer'>Would you be interested in having explosive diareha in the near future?</label>
      </li>
    </ol>
    <input type='submit'>
  </fieldset>
</form>

Answer 2

你应该使用 button element in the button state (or an input element in the button state).

为什么不a？因为它应该只用于资源链接。

为什么不 div？ 因为默认情况下它不可聚焦（对于键盘用户），并且因为它不带有隐式 WAI-ARIA角色（为了可访问性），所以你必须手动添加这两个功能，本质上是重新创建一个已经存在的元素：button.

作用于 `input` 的 HTML 元素的语义

Semantics of HTML element that acts on `input`

html

semantic-markup

片段