Radio & checkbox

Tell us what’s happening:
what am i doing wrong on this ?

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" name="indoor-outdoor"> Indoor</label>
  <label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label><br>
  <label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>
  <label for="lazy"><input id="lazy" type="checkbox" name="personality"> Lazy</label>
  <label for="energetic"><input id="energetic" type="checkbox" name="personality"> Energetic</label><br>
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
</form>
</main>
<form action="https://freecatphotoapp.com/submit-cat-photo">
<label for ="indoor"><indoor id="indoor" type="radio" name="indoor-outdoor">indoor</label>
<label for="outdoor"><outdoor id="outdoor" type="radio" name="indoor-outdoor"outdoor</label>
<label for="loving"><loving id="loving" type="checkbox" name="personality">loving</label>
<label for="lazy"><lazy id="lazy" type="checkbox" name="personality"lazy</label>
<label for="energetic"><energetic id="energetic" type="checkbox" name="personality">energetic"</label>
<input type="text" placeholder="cat photo url" required>
<button type="submit">submit</button>
</form>
<main>
<form action="https://freecatphotoapp.com/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>
<label for="loving"><input id="loving" value="indoor" type="checkbox"name=loving></label>
<label for="lazy"><input id="lazy" value="checkbox" type="personality" name="lazy"></label>
<label for="energetic"><input id="energetic" value="checkbox" type="personality" name="energetic"></label>
<label> input type="checkbox"="cat-photo url"
<button type="submit">submit</button>
</form>

Your browser information:

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

Challenge: Use the value attribute with Radio Buttons and Checkboxes

Link to the challenge:

reset your code, add the required attribute to the existing elements, not create new elements

I don’t understand what you mean, can you show me

there are three different form elements here, you need to have only one

so use the Reset button

then identify the input elements, and add to those elements the value attribute

here an example:

<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>
1 Like

i did this in the being, I i got no were with it. and it all different ways got no were. the company needs to put more instruction into their material. getting no were with this, why would i want to reset all my code?

HI @smsapp

If you use the reset button the code related to this lesson will be reset so don’t worry about it

About the solution to the question you just need to add value to the radio buttons so that later you can also pick the radio button using those values which can help you with JS code later on. :slightly_smiling_face:

Just add
< value="indoor">
in between the input tag as mentioned by ieahleen in above reply

I have give up it useless!

Don’t be like that
there is so much to learn. It would be fun