Create a Set of Radio Buttons

Create a Set of Radio Buttons
0.0 0

#1

Tell us what’s happening:
The error message keeps saying that I should “Give your radio buttons the name attribute of indoor-outdoor.”
I have looked at the hints and it looks just like my code. I can’t figure out what the problem is.

Your code so far

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/c
<style>
  .red-text {
    color: red;
  }

  h2 {
    font-family: Lobster, Monospace;
  }

  p {
    font-size: 16px;
    font-family: Monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }

  .smaller-image {
    width: 100px;
  }
</style>

<h2 class="red-text">CatPhotoApp</h2>

<p>Click here for <a href="#">cat photos</a>.</p>

<a href="#"><img class="smaller-image thick-green-border" alt="A cute orange cat lying on its back. " src="https://bit.ly/fcc-relaxing-cat"></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 type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
</form>
<label><input type="radio" name="indoor/outdoor">Indoor</label>
<label><input type="radio" name="indoor/outdoor">Outdoor</label>```
**Your browser information:**

Your Browser User Agent is: ```Mozilla/5.0 (iPad; CPU OS 11_0_2 like Mac OS X) AppleWebKit/603.1.30 (KHTML, like Gecko) CriOS/61.0.3163.73 Mobile/15A421 Safari/602.1
```.

**Link to the challenge:**
https://www.freecodecamp.org/challenges/create-a-set-of-radio-buttons

#2

The labels/inputs need to go inside the form tags, because they are form elements. You have them below the form element.


#3

Thank you for your suggestion. I have entered the code within the form element, and I am still getting the same error message,.

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

#4
<form action="/submit-cat-photo">
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
  <label><input type="radio" name="indoor/outdoor"> Outdoor</label>
  <label><input type="radio" name="indoor/outdoor"> Indoor</label>
</form>

#5

I don’t know why the code that I am copying and pasting in the message to you doesn’t show up!


#6

I’ve edited your post for readability. When you enter a code block into the forum, remember to precede it with a line of three backticks and follow it with a line of three backticks to make 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.


#7

The instructions says the name should be “indoor-outdoor”. You have “indoor/outdoor”.


#8

Thank you for the tip on for entering backticks so my code is readable. I really appreciate it because it will help me in the future.

Also, thank you for pointing out the error in my code. Only one wrong key stroke can throw the code off.