Семантика HTML-элемента, действующего на `input`

У меня есть набор checkboxes со следующей структурой:

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

Флажки используются только для управления пользовательским интерфейсом (не для отправки формы). У меня есть связанный элемент html с функцией onclick jQuery, которая очищает все флажки. В настоящее время этот элемент представляет собой просто div. Семантически, есть ли какие-нибудь передовые практики, чтобы сказать, должно ли это быть button, a (без значения href) или продолжать оставаться div?


html semantic-markup
person ChrisW    schedule 28.11.2016    source источник
comment
Ну ... технически он должен быть частью самой формы и быть флажком (включен или выключен для выбора всех / отмены выбора всех). Если он полагается на javascript, его следует добавить с помощью javascript (вообще не являющегося частью HTML). Кроме того, я надеюсь, что эти флажки заключены в тег <form>.   -  person junkfoodjunkie    schedule 28.11.2016
comment
@junkfoodjunkie - нет, они не заключены в тег <form> (я не писал HTML ...), но спасибо за подсказку о том, что он должен быть добавлен самим javascript - я согласен с этим!   -  person ChrisW    schedule 28.11.2016
comment
Что ж, тогда это уже несемантично, так что кого волнует, какой элемент вы используете. Просто добавьте его через javascript, если он основан на функциональности.   -  person junkfoodjunkie    schedule 28.11.2016
comment
@junkfoodjunkie Я согласен с тем, что здесь используется HTML4, но stackoverflow.com/a/3294624/889604 означает, что тег form не необходимо - это изменилось для HTML5?   -  person ChrisW    schedule 28.11.2016
comment
Я думал, что это для отправки. Если это только для элементов управления пользовательского интерфейса, форма строго не нужна   -  person junkfoodjunkie    schedule 28.11.2016

Ответы (2)


arrow_upward
2
arrow_downward

Вы должны использовать элемент button в _ 2_ состояние (или _ 3_ элемент в _ 4_ состояние).

Почему бы не a ? Потому что его следует использовать только для ссылок на ресурсы.

Почему бы не div ? Поскольку по умолчанию он не настраивается (для пользователей клавиатуры) и не имеет неявной роли WAI-ARIA (для доступности), вам придется добавить обе функции. вручную, по сути воссоздавая уже существующий элемент: button.

person unor    schedule 28.11.2016
comment
На самом деле это то, что я думал изначально, спасибо за подтверждение - person ChrisW; 28.11.2016

arrow_upward
1
arrow_downward

Семантика - это умирающая птица дронт. Сказав это, вот моя попытка соответствовать стандартам, которые, кажется, в значительной степени игнорируются. Я просто использую тот элемент, который лучше всего подходит для задачи, и кажется логичным, поскольку общие элементы div и span рассматриваются в последнюю очередь. Я считаю, что главной задачей было сохранение кода из представления и разметки, поэтому используйте 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>

person zer00ne    schedule 28.11.2016
comment
Полезная перспектива, спасибо (и хотя я сказал onclick, это jQuery и поэтому все равно полностью отделен от тегов) - person ChrisW; 28.11.2016
comment
Если вы используете метод onclick, есть только 2 способа использовать его AFAIK: как атрибут элемента или как свойство DOM, для которого оба являются простыми методами JavaScript. Я искал его в jQuery, но .on('click'... не onclick. - person zer00ne; 28.11.2016
comment
Я использовал фразу onclick как описание, а не как технический термин. Я не использую onclick, просто очень простую функцию щелчка: $("#clearboxes").click(function(){ /*logic to clear boxes*/ }); - person ChrisW; 29.11.2016