Hey, a little confused on why we need to nest inputs in labels?

I won’t bother including all the code I’ve done so far because I’m sure it’s a simple issue, I’m just not fully understanding why it’s asking me to nest all my radio buttons & check boxes in labels!

I don’t think it explained it very well in the lesson and if it did I’m being completely stupid! Thanks for any help!

Hi, so this is something that’s kind of up in the air, and genuinely boils down to how you like to do things.

  1. explicit association
<label for="input_id">label text</label>
<input type="text" name="input_name" id="input_id>

2)implicit association

<label>
    <input type="text" name="input_name" id="input_id>
    label text
</label>

Both of the above code work, and both associate the input with the label. But nesting the input within label eliminates the requirement of having a for attribute in the label element. Note it is still good form to include the for attribute.

For me I like 1. better, as I find styling 1. in CSS easier.

2 Likes

following post from @MatchaCrisp, here the requirement is to use implicit association

if you want help in finding the issue, you really need to post your code