Radio Buttons..Someone check this out please

**Hello, I’m here about that ‘‘radio’’ buttons, I watched the video tutorial and and did everything just like that guy in the video, but when I’m trying to go to the next task they are saying one note ain’t completed. And this is that note: Each of your two radio button elements should be nested in its own label element. So can you check what’s wrong with it please? They are nested in its own label, atleast I think like that. :thinking:
**

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="/submit-cat-photo">

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

  <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/78.0.3904.108 Safari/537.36.

Challenge: Create a Set of Radio Buttons

Link to the challenge:
https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/create-a-set-of-radio-buttons

Hi and welcome to the forum :slight_smile: When we say that an element is nested in another element, it means that it is inside that element. For example:

<div>
    <p>Some text, doesn't matter...</p>
</div>

Here, we would say that <p> element is nested inside the <div> element. In your task, you should nest an <input> element inside the corresponding <label> element. See if you can do it now based on the example that I gave you, and if you still have a problem, we’ll try to give you more hints. Good luck! :slight_smile:

But they are already nested in it’s own label. Aren’t they?
If each label has a closing tag…
My mind will blow up soon :laughing: :

No, you have only nested text (i.e. Indoor or Outdoor) in the label element. You should be nesting the input element in the label element.

@RandellDawson Can you show me with codes please. I feel stupid :smiley:

No, you need to show your next attempt. We want to guide you to a solution, instead of just giving you the solution.

Alright. I will try, thanks.
p.s i’m trying 1 hour already hah…:smiley:

If it helps, maybe try focusing on the tags themselves. You have a <label>...</label> tag and you have an <input> tag which is self-closing. The task is to put <input> inside the <label>. Now let’s look at your code:

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

What do we see? Line 1 is the self-closing <input> tag, and line 2 is the <label> element with both its opening and closing tags. Can you see how <input> isn’t really inside the label element? :slight_smile:

So I guess I need to remove closing tag from < input > tag?

Not quite :slight_smile: <input> is a self-closing tag, which means that it doesn’t have a closing tag. If you look at the following line from your code:

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

Syntactically, this is fine. We have an <input> tag with some attributes there that we can ignore for now. But you don’t see </input> anywhere, right? That’s because there is no closing tag for the input element.

On the other hand, you have the label element with both opening (<label>), and closing tag (</label>). Everything between these two things is said to be nested within that element. Now, let’s take a look at your code:

<label for="indoor">Indoor</label>

What’s nested inside the label tag in the example above? (HINT: Look at @RandellDawson’s first comment :slight_smile: )

Oh my gaash, thanks guys. I feel soo good right now. (and dumb at the moment) , but i’m here to learn coding right. :slight_smile:
A huge thanks!
@kristina_v @RandellDawson

1 Like