Learn HTML by Building a Cat Photo App - Step 48

HTML-CSS
1

** Notice that both radio buttons can be selected at the same time. To make it so selecting one radio button automatically deselects the other, both buttons must have a name attribute with the same value. below is the question, i have given out my best but still not correct. please how do i do it correctly

Add the name attribute with the value indoor-outdoor to both radio buttons.Tell us what’s happening:**
Describe your issue in detail here.

<html>
  <body>
    <main>[date=2023-04-30 timezone="Africa/Lagos"]
      <h1>CatPhotoApp</h1>
      <section>
        <h2>Cat Photos</h2>
        <!-- TODO: Add link to cat photos -->
        <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
      <section>
        <h2>Cat Lists</h2>
        <h3>Things cats love:</h3>
        <ul>
          <li>cat nip</li>
          <li>laser pointers</li>
          <li>lasagna</li>
        </ul>
        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
        </figure>
        <h3>Top 3 things cats hate:</h3>
        <ol>
          <li>flea treatment</li>
          <li>thunder</li>
          <li>other cats</li>
        </ol>
        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>  
        </figure>
      </section>
      <section>
        <h2>Cat Form</h2>
        <form action="https://freecatphotoapp.com/submit-cat-photo">

<!-- User Editable Region -->

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

<!-- User Editable Region -->

          <input type="text" name="catphotourl" placeholder="cat photo URL" required>
          <button type="submit">Submit</button>
        </form>
      </section>
    </main>
  </body>
</html>

Your browser information:

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

Challenge: Learn HTML by Building a Cat Photo App - Step 48

Link to the challenge:

2

Hey chigoziechris69, as it says in the description of the challenge, you need to give the radio buttons a name attribute of indoor-outdoor. They each need to have that exactly because that will group them together. If you split them into indoor and outdoor, they are counted as separate radio buttons still.

And you have an extra < before the name property in your radio buttons, as well.

3

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