Search code examples
htmlforms

Im on freecodecamp html. and i am getting a error that says ,Your first radio button on your form should be checked by default


I have been following the tutorial for HTML and it wants the first two checkbox and the two radio buttons to be checked automatically. But whenever I tried using my code as you can see below on line 20, 21, 22 and 23 at the ends. I can't seem to find a solution. I have tried resetting the code and looking through the notes. I was given and everything besides the first radio button that is being checked.

    <h2>CatPhotoApp</h2>
    <main>
      <p>Click here to view more <a href="#">cat photos</a>.</p>
    
      <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></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="https://www.freecatphotoapp.com/submit-cat-photo">
        <label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked>Indoor</label>
        <label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor" checked> Outdoor</label><br>
        <label for="loving"><input id="loving" type="checkbox" name="personality" value="loving" checked> Loving</label>
        <label for="lazy"><input id="lazy" type="checkbox" name="personality" value="lazy" checked> Lazy</label>
        <label for="energetic"><input id="energetic" type="checkbox" name="personality" value="energetic"> Energetic</label><br>
        <input type="text" placeholder="cat photo URL" required>
        <button type="submit">Submit</button>
      </form>
    </main>
```html

Solution

  • Only one radio button in a group can be selected at the same time. You are trying to have two radio buttons checked in one group, to fix the problem make sure only the top radio button is checked, like so:

    <label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked>Indoor</label>
    <label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
    

    I hope this helps fix the problem for you.

    Edit: See W3Schools for more information on radio buttons: https://www.w3schools.com/tags/att_input_type_radio.asp