Create a Set of Radio Buttons- Taayinka Stout

HTML-CSS
1

Tell us what’s happening:
My page needs two radio button elements, my radio buttons should be given the name attribute of indoor-outdoor and Each of my two radio button elements should be nested in its own label element, and last but not least Each of my radio button elements should be added within the form tag.
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://www.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://www.freecatphotoapp.com/submit-cat-photo">
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
</form>
<label label for="indoor">
<button id="indoor" type="radio" name="indoor-outdoor">Indoor
  </button>
</label>
<form>
<label for="outdoor">
  <button id="outdoor" type="radio" name="indoor-outdoor">Outdoor
  </button>
</label>

</form>

</main>

  **Your browser information:**

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

Challenge: Create a Set of Radio Buttons

Link to the challenge:

2

Hello there,

This is the lesson’s example of a radio button:

<input type="radio" name="indoor-outdoor">

This is what you have:

Hope this helps

3

Tell us what’s happening:
I got everything good so far it’s just that I need to add Each of my radio button elements that should be added within the form tag. I’m just honestly confused. May you please help me put the form tags to where there suppose to go?

  **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://www.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://www.freecatphotoapp.com/submit-cat-photo">
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
</form>
<label label for="indoor">
<input type="radio" name="indoor-outdoor">Indoor
  </button>
</label>
<form>
<label for="outdoor">
  <input type="radio" name="indoor-outdoor">Outdoor
  </button>

</label>
</form>


</main>

  **Your browser information:**

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

Challenge: Create a Set of Radio Buttons

Link to the challenge:

4

You have extra </button>tags that don’t belong. The “submit” button is at the end of the form. So I put my radio buttons before the text input. I then follow the nested example in the challenge.

5

Hi @12558139 !

I have moved your duplicate topic over to this original one.

If you have follow up questions on how to complete this challenge please ask them in this discussion thread.

Thanks!

6

I’m still confused by your reply. Do you mind showing me the exact code on how it should be like? Do you mind copying and pasting how my code should be?

7

Screen Shot 2021-05-08 at 8.21.35 PM
Screen Shot 2021-05-08 at 8.21.35 PM717×547 47.9 KB

Delete the parts with the white line-through.

I prefer to put the radio buttons before the text input.

Remember that the radio buttons need an id that matches its label’s for attribute.

8

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