Help for Basic HTML and HTML5: Use the value attribute with Radio Buttons and Checkboxes

HTML-CSS
1

Tell us what’s happening:
I keep getting an error saying
One of your checkboxes should have the value attribute of loving. One of your checkboxes should have the value attribute of lazy. One of your checkboxes should have the value attribute of energetic.
Can you help please with what I am doing wrong?

This is my 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="/submit-cat-photo">
    
       <label for="indoor"> 
 <input id="indoor" value="indoor" type="radio" name="indoor-outdoor">Indoor 
</label>
<label for="outdoor"> 
 <input id="outdoor" value="outdoor" type="radio" name="indoor-outdoor">Outdoor 
</label>
<br>
<label for="loving"> 
<input id="loving" type="checkbox" name="personality" value="loving"> loving
</label>
<label for="lazy"> 
<input id="lazy" value="lazy" type="checkbox" name="personality">lazy 
</label> 
   <label for="energetic"> 
<input id="energetic" type="checkbox" name="personality" value="energetic">energetic
</label>
<br>
   <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/81.0.4044.122 Safari/537.36.

Challenge: Use the value attribute with Radio Buttons and Checkboxes

Link to the challenge:

2

You changed the text inside the labels, removing capitalization. You don’t want to change the displayed text, just add a value.

3

Many thanks but not sure what you mean. The checkbox labels are all lower case as they were before and the same as for the radio labels and don’t see what difference that would make anyway?

4

They were not all lowercase originally. If you reset the code you will see that they were originally:

   <label><input type="checkbox" name="personality"> Loving</label>
    <label><input type="checkbox" name="personality"> Lazy</label>
    <label><input type="checkbox" name="personality"> Energetic</label><br>

They are not the same as the radio buttons. In your code above:

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

It makes a difference, because the tests are looking to see what your code is and if it matches the correct answer. If you change things that you are not supposed to change, then the code will not match. “hello” is not the same thing as “Hello”.