Learn HTML by Building a Cat Photo App - Step 60

HTML-CSS
1

Tell us what’s happening:

Hi! I don’t have a problem with this step, but I’m curious about the code added here.
In one of the previous steps, I added the “for” attribute to the checkboxes, and the guide said this is another option to add a specific value to the attributes, instead of the “value=” attribute that was used on the radio buttons.

However, this step 60 asks us to add the “value=” attribute to the checkboxes regardless, so does this not make the “for=” attribute useless in the code then?

Your code so far

    <fieldset>
            <legend>Is your cat an indoor or outdoor cat?</legend>
            <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
            <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
          </fieldset>
          <fieldset>
            <legend>What's your cat's personality?</legend>
            <input id="loving" type="checkbox" name="personality" value="loving"> <label for="loving">Loving</label>
            <input id="lazy" type="checkbox" name="personality" value="lazy"> <label for="lazy">Lazy</label>
            <input id="energetic" type="checkbox" name="personality" value="energetic"> <label for="energetic"> Energetic</label>
          </fieldset>
2

for is added to the label and tells the browser that the label is connected to an input element.

value is added to the input elements and is used by the back-end code to understand what the selected checkbox is about.

3

Do the radio buttons not need the “for” element then for the browser to know the Indoor and Outdoor texts are connected to the input?

4

the for attribute goes in the label.
It connects the label to the input. For eg

<input type="radio" id="super"><label for="super">Super!</label>

5

How does the execution differ from this.

<label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>

Here the entire input tag is inside the label, and there is no for attribute used.

6

i am not sure what you mean by ‘execution’?

There are multiple ways to write labels.

7

I just meant that is there a difference in the code for radio that is fully inside the label, and the code for checkbox, that has the for inside the label only.

You said that for is added to the label to tell the browser that the label is connected to an input element. The codes for radio do not have this “for” attribute so does the browser not know this then?

8

there is a difference in something called the DOM.
input inside label means the input is a child of the label.
whereas the other option the label and the input are siblings.

I am kind of losing track of where this conversation is going as at the beginning you seemed to be confused about for and value.
These are two different things and do different things.
I hope that is at least clear now.

9

Yes sorry my confusion was simply in that the task had us code the radio and checkbox lines differently, while giving the idea that they do the same things, which is why I was confused why one line was without for and one with for and what the difference was.

10

they want you to see different ways of writing the code.
Nesting the input inside the label creates a relationship between them immediately.
But if you can’t do that, then use the for attribute.

11

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.