How do I associate the text Loving with the checkbox by only nesting the text Loving in a label element and place it to the right side of the checkbox input ele

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
How do I this one?
There’s another way to associate an input element’s text with the element itself. You can nest the text within a label element and add a for attribute with the same value as the input element’s id attribute.
Associate the text Loving with the checkbox by only nesting the text Loving in a label element and place it to the right side of the checkbox input element.

  **Your code so far**


<html>
<body>
  <h1>CatPhotoApp</h1>
  <main>
    <section>
      <h2>Cat Photos</h2>
      <!-- TODO: Add link to cat photos -->
      <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
      <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
    </section>
    <section>
      <h2>Cat Lists</h2>
      <h3>Things cats love:</h3>
      <ul>
        <li>cat nip</li>
        <li>laser pointers</li>
        <li>lasagna</li>
      </ul>
      <figure>
        <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
        <figcaption>Cats <em>love</em> lasagna.</figcaption>  
      </figure>
      <h3>Top 3 things cats hate:</h3>
      <ol>
        <li>flea treatment</li>
        <li>thunder</li>
        <li>other cats</li>
      </ol>
      <figure>
        <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
        <figcaption>Cats <strong>hate</strong> other cats.</figcaption>  
      </figure>
    </section>
    <section>
      <h2>Cat Form</h2>
      <form action="https://freecatphotoapp.com/submit-cat-photo">
        <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"> <label for="Loving">loving</label>
        </fieldset>
        <input type="text" name="catphotourl" placeholder="cat photo URL" required>
        <button type="submit">Submit</button>
      </form>
    </section>
  </main>
</body>
</html>

  **Your browser information:**

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

Challenge: Step 55

Link to the challenge:

6 Likes
2

Hihi!

So it is exactly what it says, even if it seems like a lot. All you need to do is place the tag <label for="loving"> ... </label> around where you typed “Loving”! That’s all nesting is, you nest the word loving into the tag

Mod edit: full solution removed

Does that make sense?

6 Likes
3

Thank you very much for the help. I understand it now :sweat_smile:

2 Likes
4

It dosen’t work

Test

Sorry, your code does not pass. Keep trying.

Hint

You will need to add a new label element in which to nest the text Loving. Make sure it has both an opening and closing tag.

1 Like
5

Hi Beloise,

I was excited to see you helping out the original poster by giving hints and tips on how to solve this exercise. Thanks so much for that. I have just one piece of bad news though which is that I had to delete the solution lines from your response because the ideal for this forum is to guide learners to reach the solution themselves instead of to just copy and paste from someone else.

I also agree that it is easier to simply provide a solution but we have found that doing so doesn’t ultimately give the coder the experience of learning to debug or the experience of trial and error which can help them remember a concept longer into the future. That is why the moderators try to remove any full solutions from the forum when we are made aware of them.

I hope to see your continued and valuable contributions here on the forum and thank you in advance for your understanding.

2 Likes