Basic HTML and HTML5: Create a Set of Radio Buttons!

HTML-CSS
1

Tell us what’s happening:

How do I make Each of my two radio button elements be nested in its own
label element. Each of my label elements should have a closing 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://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 (X11; CrOS x86_64 12871.67.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.94 Safari/537.36.

Challenge: Create a Set of Radio Buttons

Link to the challenge:

2

Each of your radio buttons can be nested within its own label element. By wrapping an input element inside of a label element it will automatically associate the radio button input with the label element surrounding it.

The challenge description gives two examples of nested elements:

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

and

<label for="indoor"> 
  <input id="indoor" type="radio" name="indoor-outdoor">Indoor 
</label>
It's going to be extremely important to read the description carefully. Often you will have to read it more than once.
1 Like
3

still do not get it.

4

I’ll try to explain this another way so you can correct the errors in your code, separated by issue in hopes that this will help.

  1. Nesting - look at how @ArielLeslie wrote the code and compare it with yours. You will notce <input> is nested within <label> . One way you can tell if something is nested easily is by looking at the CSS code properly formatted. If the line below is indented it is nested. Your code has 4 separate lines, none of which are nested.

  2. Closing Tag - this is probably just something you didn’t pick up. It’s not really an error with the closing tag. This error is really because of your opening <label> tags. The word should be in lowercase.

TIP - make sure you pay attention to to the capitalizations in these exercises because other people have reported failing tests because of incorrect captalization.

If you need futher help, just let us know what’s throwing you off and we’ll try to explain it another way.

5

I am sorry I still do not get what I am doing wrong

6

Do you think I need to start all over in order to understand the computer coding language

7

Hello everyone,
This lesson was so confusing for me but thanks to the video help, I was able to write the code. On the video help the man wrote:
" Indoor "
first then he put his label code on the next line but on the notes it had this example: ```

Indoor

My question is why on the challenge , the <label didn’t for go first? Why did the man write <input id= first instead? Does it matter the order?

I hope this make sense. I apologize if what I am asking is confusing.
Thanks in advance.

8

Challenges are updated periodically to make them more effective. Often a video may be old enough not to match the challenge exactly. The videos can be very helpful in learning how people approach the problem, but you need to use some critical thinking and apply the same approach to challenge requirements. In this case, the challenge states that inputs must be nested inside of labels.

1 Like