Create a Set of Three Checkboxes

HTML-CSS
1

Tell us what’s happening:

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="loving">
    <input type="checkbox" 
    name="personality">Loving</label>
    <label for="mean">
      <input type="checkbox" name="personality">Mean</label>
  <label for="sleepy">
    <input type="checkbox" name="personality">Sleepy</lable>
    </form>
</main>

Your browser information:

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

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

2

Hi daniyalrasheed343,

I didn’t see a question, so am guessing at the problem.

I removed the attributes from your tags to help with diagnosis:

<form>
  <label>
    <input>Loving</label>
    <label>
      <input>Mean</label>
  <label>
    <input>Sleepy</lable>
</form>
  1. You have a ‘lable’ typo error.
  2. The <input> tag shouldn’t be within the <label> tag. Instead of:
    <label><input>label text</label>

You want:

    <label>label text</label><input>

Fixing this should get you closer.

hth

3

Actually, the input can be wrapped in the label, that’s perfectly valid. If you don’t wrap the input, then you should include a ‘for’ attribute on the label, indicating which input it relates to.

So both are legitimate, the label before the input or the label wrapping the input. In fact, this is from the lesson’s instructions themselves:

Add to your form a set of three checkboxes. Each checkbox should be nested within its own label element. All three should share the name attribute of personality .

(emphasis is my own)

The point about label vs lable, however, is key.

Note that, while fixing just that will pass the test, you have broken the rest of the form in doing this. The instructions don’t say to REMOVE anything from the form, simply to add three checkboxes. You’ve removed radios, text fields and a submit button. As I say, it does pass without them, just be aware that that’s kind of a useless form (no submit button? lol)