Question about Project: Build a Survey Form

HTML-CSS
1

I’ve just been reading through the HTML for this project and I’m wondering about the checkbox section pasted below.

Checkbox 2 is missing the tags but appears the same as the other checkboxes and has the correct label displayed, does the not make any functional difference here?

Also, the value assigned to the last two checkboxes are both 10 when I would expect the final value to be 11. Is there a reason for a limit of 10 of which I’m not yet aware or is it a simple typo?

<ul id="preferences" style="list-style: none;">
          <li class="checkbox"><label><input name="prefer" value="1" type="checkbox" class="userRatings">Front-end Projects</label></li>
          <li class="checkbox"><input name="prefer" value="2" type="checkbox" class="userRatings">Back-end Projects</li>
          <li class="checkbox"><label><input name="prefer" value="3" type="checkbox" class="userRatings">Data Visualization</label></li>
          <li class="checkbox"><label><input name="prefer" value="4" type="checkbox" class="userRatings">Challenges</label></li>
          <li class="checkbox"><label><input name="prefer" value="5" type="checkbox" class="userRatings">Open Source Community</label></li>
          <li class="checkbox"><label><input name="prefer" value="6" type="checkbox" class="userRatings">Gitter help rooms</label></li>
          <li class="checkbox"><label><input name="prefer" value="7" type="checkbox" class="userRatings">Videos</label></li>
          <li class="checkbox"><label><input name="prefer" value="8" type="checkbox" class="userRatings">City Meetups</label></li>
          <li class="checkbox"><label><input name="prefer" value="9" type="checkbox" class="userRatings">Wiki</label></li>
          <li class="checkbox"><label><input name="prefer" value="10" type="checkbox" class="userRatings">Forum</label></li>
          <li class="checkbox"><label><input name="prefer" value="10" type="checkbox" class="userRatings">Additional Courses</label></li>
        </ul>

Thanks in advance for any clarification.

edit: added the code rather than the output

1 Like
2

If you try to click the label text of other elements with the label tag you can see that, by clicking the label the checkbox is selected, but if you try to click the text of second checkbox, you won’t find that function as you saw when clicking other checkboxes with label.

That’s the use of label, there are two ways, one is by using the for attr in label which calls the id of the input and the other one is wrapping the input with label as in this example

1 Like
3

Thank you very much for this answer. I hadn’t actually tried to click the label just the checkbox so I hadn’t noticed the difference.

4

Hi,

In this cases you should use radio input instead of checkbox, when you have more options and just one of them will be selected. checkbox is like Yes/No question but your logic say that just one of them will be pass.

for example if you check 3 and 10 just you see 10 for value of prefer when post.