I’ve tried this about 4 different ways and it’s not passing the code. I’ve tried “Loving” before and after the element and have correctly used the for=“loving” attribute. Please assist.
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>
<!-- User Editable Region -->
<legend>What's your cat's personality?</legend>
<label for="loving">Loving<input id="loving" type="checkbox"></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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36
I also backspaced one times too many and the previous section dropped down into this editable region. Not sure if deleting it would break the course or not… or if it’s preventing it from passing the code. sos
I am currently looking, but cannot seem to wrap my head around what’s wrong. It seems like a repeat of the format from the previous step with the addition of the "for=“loving” attribute. What else am I missing?
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 nesting only the text Loving in a label element and giving it an appropriate for attribute.
Which it means, write the attribute for with the value that the attribute id in the <input> element has (“loving” is the value, thus for=“loving”) and place this for inside a new element <label></label>
@anon28508191 Ok, that worked. ptl. Can you explain why it worked? The question itself seems like it’s worded so poorly. Help me understand if you can.
Hey @drngbsn I know how you feel about the wording of this step. It is not just you. I am glad you asked again, since it is important to understand the concept more than to pass the objective step.
The request reads as:
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 nesting only the text Loving in a label element and giving it an appropriate for attribute.
The first part is making a confusing reference that you as a learner were supposed to know from just one previous step. But it has some key words label, for attribute and the context (text) Loving in uppercase.
The second part is actually the real request of what the task is about.
It wants you to identify where the context “Loving” is and that you create a <label></label> around (nest it); that you create a previously mentioned attribute for, (at this point you need to be clear what an attribute is), and that you can identify the other attribute id’s value (which is “loving”), if you get all that, now, you have to place all that inside the first opening tag <label>. But , furthermore, you must pay attention that before you started, there was an space between type="checkbox"> and Loving which must be preserved when you add the new level element.