Radio button elements within the form tag

Tell us what’s happening:
It says the radio button elements should should be added within the form tag. I have no idea what that means. Please help .

Your code so far
Screen Shot 2021-01-04 at 12.58.00 PM


<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">
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
</form>
</main>
<label>
<input type= "radio" name="indoor-outdoor">Indoor
  </label>
  <label>
<input type= "radio" name="indoor-outdoor"> Outdoor
    </label>


Your browser information:

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

Challenge: Create a Set of Radio Buttons

Link to the challenge:

You see how the text <input> and <button> are inside the form tags (they are after the opening <form> and before the closing </form> tags)? So that’s where you want to put the radio buttons as well.

2 Likes

i tried changing it but it’s not working.

You’ll have to post your new attempt in here so we can see what you did otherwise we have no idea why it isn’t working. Be sure to click the </> button on the editor first and then place your code in between the backticks.

Move the closing form tag </form> to the bottom of the code, below the last closing label tag </label>). This will allow the form to encompass both of the labels.

I am still stuck. This is so frustrating. ;(

Screen Shot 2021-01-07 at 11.39.09 AM

what am i doing wrong?

First label should be <label for="indoor">, and the second one should be <label for="outdoor">. That way the labels will be attached to their respective inputs.

Send a screenshot of the whole code

Screen Shot 2021-01-07 at 2.07.12 PM

Please don’t use screenshots. Please copy-paste your code into the forum.


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 (’).

Your radio buttons are not inside your form

Each of your radio button elements should be added within the form tag.

Thank you. I am very new to this. Thank you for showing me.

1 Like
<label>
<input type="radio" name ="indoor-outdoor"> Indoor 
</label>
<label>
<input type="radio"name="indoor-outdoor"> Outdoor
</label>

Alright, cut and paste both the closing </form> and the </main> tags and put them at the very end of the code. In that same order, so that the </main> tag is the very last line on your IDE, and the </form>
tag should come right before it. When you close the form before the labels start, you’re not including them inside the form. And that’s not what we want. All those details are needed for the form, and it’s why it should come second to last.

Like this:

<main>
<form>
(other lines of code…)
<label> lines
<\form>
</main>

1 Like

I know the closing forms are

</> and opening forms is <> I just don’t understand what I am doing incorrectly. I have been stuck on this for over a month. ;(

Ok i will try this. Thank you

<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">
<!-- YOUR BUTTONS SHOULD BE HERE -->
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
</form>
</main>

<!-- YOUR BUTTONS ARE HERE INSTEAD -->
  <label>
    <input type= "radio" name="indoor-outdoor">Indoor
  </label>
  <label>
    <input type= "radio" name="indoor-outdoor">Outdoor
  </label>
1 Like

I got it!!! omg thank you so much!!

No problemo, I got you :+1:t5: