HTML - CheckBox

> (World Wide) Web - (W3|WWW) > HyperText markup Language (HTML)

1 - About

Checkbox is an type of input element.

3 - Bootstrap

Panel with list group in v4 was replaced by Card

<div class="card" style="width: 18rem;">
 
    <div class="card-header">
        <label><input type="checkbox" unchecked> Checkbox 1 </label>
    </div>
 
    <!-- List group -->
    <ul class="list-group list-group-flush">
        <li class="list-group-item"><label><input type="checkbox" value="option2"> Option two </label></li>
        <li class="list-group-item"><label><input type="checkbox" value="option2"> Option two </label></li>
    </ul>
 
</div>

Advertising

4 - Aria Role

4.1 - Example 1

Aria

<span role="checkbox" aria-checked="false" tabindex="0" id="chk1"></span>
<label for="chk1">Remember my preferences</label>

4.2 - Example 2

From Checkbox Example (Two State):

The code:

  • The Css
[role='checkbox'][aria-checked='false']:before{
   content: url('https://www.w3.org/TR/wai-aria-practices/examples/checkbox/checkbox-1/images/checkbox-unchecked.png');
}
 
[role='checkbox'][aria-checked='true']:before{
   content: url('https://www.w3.org/TR/wai-aria-practices/examples/checkbox/checkbox-1/images/checkbox-checked.png');
}
 
[role='checkbox'].focus {
   border-color: black;
   background-color: #EEEEEE;
}
  • The Javascript:
window.onload=function() { 
    var checkboxes = document.querySelectorAll('[role="checkbox"]'); 
    for (var i = 0; i < checkboxes.length; i++) { 
         var cb = new Checkbox(checkboxes[i]); cb.init(); 
    } 
}
  • The HTML
<div id="ex1">
  <h3>
    Sandwich Condiments
  </h3>
  <div>
    <div role="checkbox"
       aria-checked="false"
       tabindex="0">
      Lettuce
    </div>
    <div role="checkbox"
       aria-checked="true"
       tabindex="0">
      Tomato
    </div>
    <div role="checkbox"
       aria-checked="false"
       tabindex="0">
      Mustard
    </div>
    <div role="checkbox"
       aria-checked="false"
       tabindex="0">
      Sprouts
    </div>
  </div>
</div>
 
<!-- With the libray call at the end -->
<!-- Checkbox widget that implements ARIA Authoring Practices for a menu of links -->
<script src="https://www.w3.org/TR/wai-aria-practices/examples/checkbox/checkbox-1/js/checkbox.js" type="application/javascript"></script>

Advertising
web/html/checkbox.txt · Last modified: 2019/02/09 11:41 by gerardnico