Checkboxes............all errors

HTML-CSS
1

Tell us what’s happening:

I cant understand what is happening i am writing this as per syntax but all kinds of errors are occuring while adding checkboxes

Your code so far


<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>
  
  <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">
    <label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
    <label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label><br>
    <label for="loving"> <input id="loving" type="checkbox" name="personality"> Loving </label>
    <label for="caring"> <label id="caring" type="checkbox" name="personality"> caring </label>
    <label for="sweet"> <label id="sweet" type="checkbox" name="personality"> Sweet </label><br>
    <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 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/basic-html-and-html5/create-a-set-of-checkboxes

2

You have space after opening input tag and before the word “Indoor”.
you have extra spaces in texts inside all of your label tags.
See to that you remove all the extra spaces and you will pass the challenge.
Hope this helps.

1 Like
3

It’s not the spaces. You have:

<label for="sweet"> <label id="sweet" type="checkbox" name="personality"> Sweet </label>

Where is the input? You have a label nested inside another label. Replace the nested label with input and it should work.

P.S. if you have an input that’s nested inside a label, you don’t need the for="" attribute on the label. The following two are equivalent and interchangeable:

<label for="firstname">First Name</label>
<input type="text" id="firstname" name="firstname">

<label><input type="text" id="firstname" name="firstname">First Name</label>