Problem with Label Step 56

HTML-CSS
1

Good day. Who can help me with a problem in the assignment? Here is the assignment:

Step 56 There is another way to bind the input element text with the element itself. You can insert the text into the label element and add an attribute for with the same value as the id attribute of the input element.

Bind the text Loving with the flag by inserting only the text Loving into the label element and giving it the corresponding for attribute.

And here is my solution: <label for="loving"><input id="loving" type="checkbox">Loving</label>.

The question is why the program considers that I did not complete the task correctly and does not let me continue. I have looked at several examples on websites, and I do not see any errors in my syntax.

2

The programs considers that you did not complete the task correctly because you did not complete the task correctly. :upside_down_face:

You have more than only the text Loving inside of your label element.

3

The variants <label for="Loving">Loving</label> and <label for="loving">Loving</label><input id="loving" type="checkbox"> are also not accepted.

4

Here you deleted the input, which is not right.

Here you moved the text Loving, which also isn’t right.

Do not delete anything. Do not move anything. Only add the oping label tag and closing label tag around only the text Loving and nothing else.

5

The variants <input id="loving" type="checkbox"><label for="loving">Loving</label> are also not accepted.

6

Closer. Here you deleted a space.

Note: Its much easier if you include the link to the challenge.

7

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

8

Please stop un-doing my formatting fix to your post.

9
10

Did you fix this problem?

11

I haven’t solved it yet

12 
<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>
            
         
         <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>
13

You still removed the space after the input element

14

I can’t understand what is required of me. The assignment clearly states: “You can insert text into the label element and add an attribute for with the same value as the id attribute of the input element.” I did that, but it doesn’t work.

15

I figured it out. The error is not obvious. Why should there be a space between the angle brackets, if it was not required earlier and was not considered an error?

16

Yes. Because you deleted the space after the input element

To fix this

  1. Reset the code

  2. Delete or move absolutely nothing. Do not touch your delete button at all.

  3. Only add the opening and closing label tags, and nothing else.

17

The space was already there. You deleted it even though the instructions did not tell you to do that. Making changes the instructions don’t ask for is risky, as it can cause your code to fail.

18

Here is the option that was credited to me as correct : <input id="loving" type="checkbox"> <label for="loving">Loving</label> I still don’t really understand why it is this way, but I will keep it in mind. Thank you for taking the time to help me.

19

This is the original code:

<input id="loving" type="checkbox"> Loving

Here is your solution:

The only difference between the original and the solution is

and

That’s what it means to put only the text Loving inside of a label element.

20

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