Having problems with Radio Buttons

HTML-CSS
1

I just started my learning today. When I got to radio buttons section, I followed the instruction to create the following code but when I hit the “Run Test” button, I keep getting error. What’s wrong with this code:

<label for="indoor">

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

  </label>

<label for="outdoor">

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

  </label>
2

It helps to have your full code and a link to the challenge.

3

Check the link here https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/create-a-set-of-radio-buttons

4

Do not keep changing the tag on the post. I put it in the #html-css subforum on purpose.

What is your full code?

5

Unless I am going blind your code looks ok so I could only guess that you did not put it inside the form tags?

6

Hi @alexubokwe ,

It would be great if you could share us with the type of warning you get.

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

That's the whole code. I've been stucked in this stage since the system does not allow me to skip it. I don't know what is wrong
8

If that is every single line of code that is part of your solution for this challenge, then you have deleted a lot of the initial code. You need to reset the challenge and not delete the majority of the code you were given.

9

That part of the code does look good so as long as you have not deleted the rest as @JeremyLT mentioned the only other thing it could be is your browser using a dark mode or add blocker which is causing issues with the test. Worth checking as it happens to a lot of people

10

Hi @alexubokwe !

Welcome to the forum!

When I test your code I get the following error messages.

One of your radio buttons should have the label indoor .
One of your radio buttons should have the label outdoor .

Are you getting those same error messages?

If so, you don’t have any text for these labels.

Take a close look at the FCC example again.

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

You see how there is a text of Indoor?

That is what the tests are looking for.

When I add the text of Indoor and Outdoor to those labels, just like I showed you with the FCC example, then the test passes for me.

2 Likes
11

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