Semantics of HTML element that acts on `input`

Question

I have a set of checkboxes with the following structure:

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

The checkboxes are only used for UI control (not for a form submission). I have an associated html element that has an onclick jQuery function that clears all the checkboxes. This element is currently just a div. Semantically, are there any best practices to say whether this should be a button, an a (with no href value) or continue to be a div?

Well... it should technically be part of the form itself, and be a checkbox, really (on or off for select all / deselect all). If it relies on javascript, it should be added using javascript (not part of the HTML at all). Also, I hope those checkboxes are wrapped in a `
`-tag. — junkfoodjunkie, Nov 28 '16 at 11:25
@junkfoodjunkie - no, they're not wrapped in a `
` tag (I didn't write the HTML...), but thanks for the tip about the fact it should be added by javascript itself - I agree with that! — ChrisW, Nov 28 '16 at 12:02
Well, then it's already non-semantic, so who cares about what element you use. Just add it via javascript, if it's based on that for functionality. — junkfoodjunkie, Nov 28 '16 at 12:03
@junkfoodjunkie I accept this uses HTML4, but http://stackoverflow.com/a/3294624/889604 implies that a `form` tag isn't needed - has this changed for HTML5? — ChrisW, Nov 28 '16 at 12:06
I thought it was for submitting. If it's just for UI controls, a form isn't strictly needed — junkfoodjunkie, Nov 28 '16 at 12:09

score 2 · Accepted Answer · answered Nov 28 '16 at 13:19

2

You should use a button element in the button state (or an input element in the button state).

Why not a? Because it should only be used for links to resources.

Why not div? Because it isn’t focusable by default (for keyboard users), and because it doesn’t come with an implicit WAI-ARIA role (for accessibility), so you would have to add both features manually, essentially recreating an element that already exists: button.

answered Nov 28 '16 at 13:19

unor

92,415
26
211
360

This is actually what I originally thought, thanks for the confirmation – ChrisW Nov 28 '16 at 13:34

score 1 · Answer 2 · edited Jun 20 '20 at 09:12

Semantics is a dying dodo bird. Having said that here's my attempt to meet standards that seem to be largely ignored. I just use whatever element is best suited for the task and seems logical, generic divs and spans being the last to be considered. I believe keeping code from presentation and markup was a major objective as well, so use addEventListener instead of attribute event handlers like onclick

SNIPPET

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>

Useful perspective, thanks (and although I said `onclick`, it's jQuery and so totally separated from the tags anyway) — ChrisW, Nov 28 '16 at 13:35
If you use `onclick` method, there's only 2 ways to use it AFAIK: as an element attribute or as a DOM property to which both are plain JavaScript methods. I looked for it in jQuery but `.on('click'...` is not `onclick`. — zer00ne, Nov 28 '16 at 15:00
I was using the phrase `onclick` as a description, rather than as a technical term. I'm not using an `onclick`, just a very simple click function: `$("#clearboxes").click(function(){ /*logic to clear boxes*/ });` — ChrisW, Nov 29 '16 at 00:41

Semantics of HTML element that acts on `input`

2 Answers2

SNIPPET