HTML buttons got me in pain!

HTML-CSS
1

** HTML buttons got me in pain!!**
on https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/create-a-set-of-radio-buttons

basically, I’m on " Basic HT\ML and HTML5: Create a Set of Radio Buttons" and I’ve been having a lot of trouble because I tried to run the tests having thought I did everything correct, apparently I did not. So I review the requirements and it looks as if I have everything correct, so I try to run it again…nothing. I decide to watch the video and copy everything there, nothing. I’m in pain, please help, thanks in advance!

also, the following were the requirements that I failed to put in the code:

Each of your two radio button elements should be nested in its own label element.

Each of your label elements should have a closing tag.

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

My Code be like:


<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>
<label for="indoor">
<input type="radio" name="indoor-outdoor"Indoor
<label>
<p>Things cats love:</p>
<ul>

  <p>

</p>
  <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 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.163 Safari/537.36.

Challenge: Create a Set of Radio Buttons

Link to the challenge:

2
  • “Label” is not the same as “label”.
  • Your inputs are before your labels, not nested inside them.
3

I’m not sure I understand, I moved the inputs under the label lines and I changed the “Label” elements to “label”, however, I am still getting the same error messages.
Can you provide an example of how you would write the code? I really appreciate the help.

4

Under is not the same thing as nested inside of.

5

you should have an example in the challenge description

also, you had your indoor input without the closing > angular bracket

6

Is this considered nesting?

<label>

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

  <label for="outdoor">Outdoor</label>

</label>
7

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.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums

8

Yes and no. In that example you have both an input element and a label element nested in another label element. So, yes it’s nesting. However, your “outdoor” input is not nested in your “outdoor” label. It is before it.

9

Thank you for the help and the pointers, I was able to come to a solution thanks to your help. I was having a problem in which putting the element within my code would null the id=“outdoor”,

(I’m not sure if “Null” is the correct terminology but it would become un-highlighted.)

so I tinkered around with it and simply took out the id=“outdoor” and for=“outdoor” and it surprisingly worked, in the end my code looked like:


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


<label>
  <input type="radio" id="outdoor"  name="indoor-outdoor">Outdoor
  
</label>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</main>
10

I’m glad I could help. Happy coding.

1 Like