Howuse the value attribute with radio buttons and checkboxe

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" 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>

  **Your browser information:**

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

Challenge: Use the value attribute with Radio Buttons and Checkboxes

Link to the challenge:

2

Hi @eugene4 !

You haven’t added any value attributes to the inputs.

Here is the FCC example again on how to do that

<label for="outdoor">
  <input id="outdoor" value="outdoor" type="radio" name="indoor-outdoor">Outdoor
</label>
3

this is what i have been doing and still im stuck please can you show me other examples how it is done

4

Let’s take this first one.

If you look at the input there is no value here.

But if I add a value attribute here

    <label for="indoor"><input id="indoor" value="indoor" type="radio" name="indoor-outdoor"> Indoor</label>

Then one of the tests passes.

Screen Shot 2021-03-04 at 4.09.01 AM
Screen Shot 2021-03-04 at 4.09.01 AM934×804 83.6 KB

So you need to add a value attribute to each one of the radio and checkboxes.

This is a value attribute
value="indoor"

Make sense?

5

i have tried but still it is wrong so this is the challenge ; use the value attribute with radio buttons and checkboxes

6

Can I see your updated code with the value attributes in the inputs?

7

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>
8

Where is the value attribute of indoor?

or the value attribute of outdoor?

The test is looking for inputs like this

Do you see the difference?
My input has the value attribute of indoor. If you copy my answer from earlier than you will see one of the tests passing.

But if we look at yours , I don’t see it here.

Can you see the difference between mine and yours?

For that first input you need to add value="indoor" because that is what the test is looking for.

Does that make sense?

9

If you replace this

with this correct answer then you will see one of the tests passing

Pay close attention to this part

That is what the test is looking for.

You just have to replicate that same format for all of the checkboxes and radio buttons.

I hope that is a little bit clearer now

10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.