Code is right, but my understanding isn't quite

Tell us what’s happening:

In the “Create basic radio buttons” section of the Learn Basic HTML and HTML5, I have completed the exercise, but I am confused as to why I would set BOTH name attribute values to the same thing (indoor-outdoor), when the radio buttons are either Indoor OR Outdoor.


Your code so far

<p>Click here to view more <a href="#">cat photos</a>.</p>

<a href="#"><img src="" alt="A cute orange cat lying on its back."></a>

<p>Things cats love:</p>
  <li>cat nip</li>
  <li>laser pointers</li>
<p>Top 3 things cats hate:</p>
  <li>flea treatment</li>
  <li>other cats</li>
<form action="/submit-cat-photo">
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>

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

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


Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.87 Safari/537.36.

Challenge: Create a Set of Radio Buttons

Link to the challenge:


As it goes, I seem to have figured it out on my own. To answer my own question, the name attribute values are set to the same because they are part of the same radio group, despite being separate radio buttons.


yes! the name attribute is the name of the group of radio buttons, to group then together

Grouping them prevents you from selecting more than one. Radio buttons are generally used for selecting only one choice (like an old radio tuning just to one station). Checkboxes are for multiple choices.