Help to create a set of radio buttons

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" placeholder="cat photo URL" name="indoor-outdoor"required>
  </label>
 

  <button type="submit">Submit</button>
</form>
</main>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.96 Safari/537.36.

Challenge: Create a Set of Radio Buttons

Link to the challenge:

This is what you have:

<form action="https://freecatphotoapp.com/submit-cat-photo">
<label for="indoor"
  <input id="indoor" type="radio" placeholder="cat photo URL" name="indoor-outdoor"required>
  </label>
  <button type="submit">Submit</button>
</form>

First of all, notice that the coloring is different for the input tag? That is because the interface doesn’t know what it is because you didn’t finish the preceding label tag.

Also, you input is malformed, you have

<input id="indoor" type="radio" placeholder="cat photo URL" name="indoor-outdoor"required>

But radio buttons don’t have placeholders, and the required tag shouldn’t be there.

For a refresher, here is the example given:

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

And of course, you need two tags.

When I fix those, the code passes for me.

<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>
    <button
    type="submit">Submit</button>
  </form>
</main>

You still have not closed your label tags.

Let me do and then lets see the result. Thanks buddy for replying

Still it is showing three errors

Can you copy-paste your new code?


When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

<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>
    <button
    type="submit">Submit</button>
  </form>
</main>

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

# this is a tag with both an opening < and a closing >
<my tag>

plzz tell how to do it :pray: :pray: :pray: :pray: :pray: :pray: :pray: :pray: :pray: :pray: :pray: :pray:

Did you see this example from the challenge description that @kevinSmith gave you?

Got it brother i somehow missed the closing of label Thanks for the helpp buddy finally it is completed :pray: :+1:

1 Like