The values of loving ,lazy and energetic is not working

HTML-CSS
1

Tell us what’s happening:

Your code so far


<h2>CatPhotoApp</h2>

<main>

 <p>Click here to view more <a href="#">cat photos</a>.</p>

 <a href="#"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>

 <p>Things cats love:</p>
 
 <ul>
   <li>cat nip</li>
   <li>laser pointers</li>
   <li>lasagna</li>
 </ul>

 <p>Top 3 things cats hate:</p>
 
 <ol>
   <li>flea treatment</li>
   <li>thunder</li>
   <li>other cats</li>
 </ol>
 
 <form action="https://freecatphotoapp.com/submit-cat-photo">
   <label for="indoor"><input id="indoor" type="radio"value="indoor" name="indoor-outdoor"> Indoor</label>
   
   <label for="outdoor"><input id="outdoor" type="radio"value="outdoor" name="indoor-outdoor"> Outdoor</label>

<label for="loving"> 
<input id="loving" type="checkbox" value="loving"name="personality" > loving
</label>

<label for="lazy"> 
<input id="lazy"  type="checkbox"value="lazy" name="personality">lazy 
</label> 
 
 <label for="energetic"> 
<input id="energetic" type="checkbox" value="energetic"name="personality" >energetic
</label>

<input type="text" placeholder="cat photo URL" required>
   
   <button type="submit">Submit</button>
 
 </form>

</main>

Your browser information:

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

Challenge: Use the value attribute with Radio Buttons and Checkboxes

Link to the challenge:

2

Hello there.

Do you have a question?

If so, please edit your post to include it in the Tell us what’s happening section.

The more information you give us, the more likely we are to be able to help.

3

@bbhq

looks like you’re missing the <br> elements after the radio and checkbox types…

<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
    <label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label><br>
    <label for="loving"><input id="loving" type="checkbox" name="personality" value="loving"> Loving</label>
    <label for="lazy"><input id="lazy" type="checkbox" name="personality" value="lazy"> Lazy</label>
    <label for="energetic"><input id="energetic" type="checkbox" name="personality" value="energetic"> Energetic</label><br>
4

You need to space out the attributes, from the first view, I can see that attributes don’t have proper spacing.

1 Like
5