CODEWITHSUNDEEP
htmlsemantic-markup
ChrisW
ChrisW

Reputation: 5068

Semantics of HTML element that acts on `input`

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?

Upvotes: 2

Views: 220

Answers (2)

unor
unor

Reputation: 96577

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.

Upvotes: 2

zer00ne
zer00ne

Reputation: 43880

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>

Upvotes: 1

Related Questions