Learn HTML by Building a Cat Photo App - Step 56

HTML-CSS
1

Tell us what’s happening:

i don’t understand how to solve " Associate the text Loving with the checkbox by nesting only the text Loving in a label element and giving it an appropriate for attribute."

Describe your issue in detail here:
i need the text Loving wrapped around the element. i don’t understand what wrapped means. should the label element as the first element so the input element is inside the label? or just the type “checkbox” that should in inside the label?

Thank you

Your code so far

<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <section>
        <h2>Cat Photos</h2>
        <!-- TODO: Add link to cat photos -->
        <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</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>

<!-- User Editable Region -->

            <input id="loving" type="checkbox"<label for="Loving"</label>

<!-- User Editable Region -->

          </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/121.0.0.0 Safari/537.36

Challenge Information:

Learn HTML by Building a Cat Photo App - Step 56

2

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.
Learning to describe problems is hard, but it is an important part of learning how to code.
Also, the more you say, the more we can help!

3

Welcome to the forum @RF1210

Just a few fixes needed.

  1. the input element needs a closing angled bracket.
  2. then add a single space to separate the input and label elements.
  3. the for attribute value needs to be lowercase, to match the id attribute.
  4. the label element needs a closing angled bracket.
  5. add the word Loving between the two label tags. This is called wrapping, as in wrapping an item with something.

Happy coding

4

Thank you very much for the hints.
took me a couple tries for me to get it.

i still don’t get what the function of “for” what makes it different with “id”

Thank you

5

The instructions asked you to link the label element with the respective input element.

This occurs by placing a for attribute in the label element, and an id attribute in the nested element. The attribute value for each should match.

This is how input elements which are not nested in a label element are associated.

If the input element is nested in a label element then it is not necessary to add a for attribute to the label element.

From W3Schools:

When used together with the <label> element, the for attribute specifies which form element a label is bound to.
When used together with the <output> element, the for attribute specifies the relationship between the result of the calculation, and the elements used in the calculation.

So, the for attribute is only used in label and output elements.

In the case of label elements, when the input element is not nested.

Where as the id attribute can also be used to uniquely identify any element, for any reason.

From what I gather, when data is submitted via a form, it needs to be coded in a meaningful way for the next phase of processing and storage.

1 Like
6

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