How can I Associate the text Loving with the checkbox by only nesting the text Loving in a label element (Step 55 HTML)

HTML-CSS
1

Tell us what’s happening:
How can I Associate the text Loving with the checkbox by only nesting the text Loving in a label element and placing it on the right side of the checkbox input element? (thanks for noticing my question)

  **Your code so far**
    <fieldset>
      <legend>What's your cat's personality?</legend>
      <label>
         <label> <input for="loving"> </label>
         <input  id="loving" type="checkbox"> Loving
      </label>
     
    </fieldset>
    <input type="text" name="catphotourl" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</section>
``` 
  **Your browser information:**

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

Challenge: Learn HTML by Building a Cat Photo App - Step 55

Link to the challenge:

2

Ok first, nesting is surrounding something, usually text or another element with an element, like so :

<div><span>I am a span nested in a div</span></div>

Now what you want to do AFTER you have nested “Loving” in a label element, is add a for attribute that matches, EXACTLY, the input’s id attribute. And that’s it! Any questions?

Edit: A lil more info, the for attribute “looks” for the id in an html document that matches it and then basically tells the browser “Hey! This is for me and me alone.”

3

sorry for bothering you again
This is My code and below the image context
(i don’t really hold a fine grasp of explanation)

Problem Step
Problem Step1339×460 245 KB

4

“This is not an argument this is me asking you to correct my mind misconception”

because if ex.
the for attribute “looks” = explained to the browser“Hey! This is for me and me alone.”
(The targeting action is only for “Look” it’s fine just indenting the ex. for attribute to the input on label attribute)

5

Theres two way to link the label element with the input element.

This is the first way which is sort of new and simple

<label >First Name?
  <input name="first-name">
</label>

This is the second way which has been the standard since long time ago and is more backward-compatible to older devices

<label for="firstname">First Name?</label>
<input id="firstname" name="first-name">

As you can see, the for attribute must be the same as the id attribute.
AND that the for attribute belongs to the id attribute.

For step 55, try RESTARTING the step, you only needs to ADD ONE label element with the correct for attribute`

Hope this helps :grin:

1 Like
6

Thanks, i looked again to your explanation and do it exactly like what you had been told me to do so and it work, :grinning:

1 Like
7

Worked too, thanks mate :slightly_smiling_face:

8

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