Jecker Jecker - 6 months ago 29
HTML Question

html5 div inside label

I am trying to ensure my webapp is HTML5 compliant and by doing so I discovered an HTML5 error. I am currently using the following code:

<label><div class="someClass"><input type="checkbox" name="ChkBox[]" value="0">Some text goes here</div></label>
<label><div class="someClass"><input type="checkbox" name="ChkBox[]" value="1">Some text goes here</div></label>
<label><div class="someClass"><input type="checkbox" name="ChkBox[]" value="2">Some text goes here</div></label>


My intention is to create a container using a div and css for styling, so when the user clicks anywhere on the container, the corresponding box is automatically checked. Is there a better method of doing this without a great deal of javascript or jquery? Please keep in mind the number of check boxes will vary.

Answer

Set display:block for the label

label {
  display:block;
}
<label><input type="checkbox" name="ChkBox[]" value="0">Some text goes here</label>
<label><input type="checkbox" name="ChkBox[]" value="1">Some text goes here</label>
<label><input type="checkbox" name="ChkBox[]" value="2">Some text goes here</label>