HTML buttons got me in pain!

** 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:

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

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.

Under is not the same thing as nested inside of.

you should have an example in the challenge description

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

Is this considered nesting?

<label>

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

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

</label>

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

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.

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>

I’m glad I could help. Happy coding.

1 Like