I’m having trouble understanding how to properly wrap the text" Loving" in a label with a for attribute and where in the code to place it. I’ve tried multiple ways.
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/115.0.0.0 Safari/537.36
Challenge: Learn HTML by Building a Cat Photo App - Step 56
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.
I tried removing it from the spot it was in and put it in the label element. When I do that it removes the text Loving next to the checkbox and still gives me the prompt that it isn’t correct.
Where did you put it when you tried to put the text ‘inside’ the label element? I suspect that you did not put the text between the opening and the closing tags but instead put the text inside of a tag as if it was an attribute.
Forgive me. I’m still learning the lingo. I removed the, Loving, after checkbox> and replaced it with <label for="Loving"></label>
I also tried changing Loving to loving but neither worked.
JeremyLT, thank you for the detailed explanations. I was able to move forward. Can you please help me understand further how to know when to move text that worked previously and how to know where to move text when adding more details.
Loving, after the checkbox which worked in the previous lesson. How do I know that it needs to be moved and how do I know where within the Label to put it? I appreciate you time and effort. I was able to work out this lesson but for future lessons it would help to fully understand these details.
Associate the text Loving with the checkbox by nesting only the text Loving in a label element and giving it an appropriate for attribute.
This doesn’t say to move the text Loving. It doesn’t go anywhere. You should only write a opening label tag and a closing label tag. No other changes should be made.
