Learn HTML by Building a Cat Photo App - Step 60

HTML-CSS
1

Tell us what’s happening:

I wanna ask regarding label element and input element. nested and non-nested

Your code so far

<!-- User Editable Region -->

          <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"> <label for="loving">Loving</label>
            <input id="lazy" type="checkbox" name="personality"> <label for="lazy">Lazy</label>
            <input id="energetic" type="checkbox" name="personality"> <label for="energetic"> Energetic</label>
          </fieldset>

<!-- User Editable Region -->

i see this radio value are nested within the label element. But the checbox value, doesn’t need to be nested inside the label element.

any explenation here?

or its actually doesn’t matter?

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36

Challenge Information:

Learn HTML by Building a Cat Photo App - Step 60

2

Label elements are used to associate the text for an input element with the input element itself. You can also use the for attribute to achieve this functionality. The choice between nesting the input within the label or using the for attribute to associate the text with the input element depends on your layout requirements.

3

so both have same function, but what do you mean layout requirments?

4

value needs to be before the label tags,create a value on the input attributes with “loving,lazy & energetic”