html5 div inside label

Question

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.

This is what the `for` attribute is for. See here: http://stackoverflow.com/questions/18432376/what-does-for-attribute-do-in-html-label-tag — kayasky, May 13 '16 at 17:14
Fast solution: switch `
` to `` and set it to be `display: block`. — zzzzBov, May 13 '16 at 17:20
Squint, at the time of creating the objects I did try formatting the label, but I was not getting the formatting I wanted. After doing more research, I found there are block elements and non-block elements, and you can change a block to a non-block item and non-block to a block item. This comes from inexperience and self teaching. — James, May 13 '16 at 17:42
SatJ, at the time of creating the objects I just found the above method and was not aware this coding was out of compliance. When I was reviewing the code and checking for HTML5 issues, I just couldn't see the forest through the trees. — James, May 13 '16 at 17:46

kayasky · Answer 1 · 2016-05-13T17:27:28.473

You can use the for attribute on the <label> elements to tell what checkbox the label is for. That way when a user clicks on the label, the checkbox will toggle:

<input type="checkbox" name="ChkBox[]" id="first" value="0"><label for="first" class="someClass">Some text goes here</label>
<input type="checkbox" name="ChkBox[]" id="second" value="0"><label for="second" class="someClass">Some text goes here</label>
<input type="checkbox" name="ChkBox[]" id="third" value="0"><label for="third" class="someClass">Some text goes here</label>

score 0 · Accepted Answer · answered May 13 '16 at 17:23

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>

score -2 · Answer 3 · answered May 13 '16 at 17:29

Joining @satJ answer with @zzzzBov comment, I would do:

<input type="checkbox" name="ChkBox[]" id="first" value="0"><label for="first"><span class="someClass">Some text goes here</span></label>
<input type="checkbox" name="ChkBox[]" id="second" value="0"><label for="second"><span class="someClass">Some text goes here</span></label>
<input type="checkbox" name="ChkBox[]" id="third" value="0"><label for="third"><span class="someClass">Some text goes here</span></label>

html5 div inside label

3 Answers3