Checkboxes nested in form

HTML-CSS
#1

Hi, I’m trying to create checkboxes, which in fact appear on the page correctly, but it still tells me it’s wrong. I’ve already checked in the video and it’s the same, except I nested each element in form:

** <form
Caring

<form Independent <form Clever ** 

<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="https://freecatphotoapp.com/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>
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
</form>
</main>
<form
<label for="caring"><input id="caring" type="checkbox" name="personality">
Caring</label>
</form>
<form
<label for="independent"><input id="independent" type="checkbox" name="personality"> Independent</label>
</form>
<form
<label for="clever"><input id="clever" type="checkbox" name="personality"> 
Clever</label>
</form>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.83 Safari/537.36.

Challenge: Create a Set of Checkboxes

Link to the challenge:

#2

You need to place the checkboxes inside the main element.

1 Like
#3

The exercise asks me to add it within the form, doesn’t mention the name element. And should I add it withing or outside the form element?
Here’s the task:
Here’s an example of a checkbox:

<label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>

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 .

Your page should have three checkbox elements.

Each of your three checkbox elements should be nested in its own label element.

Make sure each of your label elements has a closing tag.

Your checkboxes should be given the name attribute of personality .

Each of your checkboxes should be added within the form tag.

Errors:
Errors:
Errors: Each of your three checkbox elements should be nested in its own label element.
Your checkboxes should be given the name attribute of personality .

many thanks

39

Navigated to Learn Basic HTML and HTML5: Create a Set of Checkboxes | freeCodeCamp.org

#4

The checkboxes should be created inside this form element:

<form action="https://freecatphotoapp.com/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>
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
</form>

After the closing </main> tag you have multiple form tags, they are not necessary, and you should delete them.

Example of a checkbox inside of the form:

<form action="https://freecatphotoapp.com/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="clever">
    <input id="clever" type="checkbox" name="personality"> Clever
  </label>
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
</form>
#5

You were supposed to nest the elements inside the existing form element, not create several new forms.

#6

Thanks for the reply, but I’m very confused. The task says: Each of your checkboxes should be added within the form tag. Also, in your example you use placeholder but in the example given in my exercise, there is no placeholder, which is for text input and not for checkboxes, isn’t it? So how is the placeholder to do with checkboxes?

Also, the example in the exercise (might be wrong) doesn’t include a submit

Many thanks

#7

Basically you start the lesson with the following code:

<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="https://freecatphotoapp.com/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>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</main>

Inside that form element you have to create three checkbox elements, and each checkbox should be nested within its own label element.

You can create a checkbox like this (No Placeholder text):

<label for="lazy">
  <input id="lazy" type="checkbox" name="personality"> Lazy
</label>

You need to create three checkboxes, like the example above, and you have to create them inside the form element, like this:

<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="https://freecatphotoapp.com/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="lazy">
      <input id="lazy" type="checkbox" name="personality"> Lazy
    </label>

    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
</main>

The example above has only one checkbox (you need three)

#8

Thank you, I’ve managed now!

#9