FAQ: Learn HTML: Forms - Checkbox Input

This community-built FAQ covers the “Checkbox Input” exercise from the lesson “Learn HTML: Forms”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Introduction to HTML

FAQs on the exercise Checkbox Input

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply (reply) below!

Agree with a comment or answer? Like (like) to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

3 posts were split to a new topic: Code was already entered?

14 posts were split to a new topic: What is the purpose of the value attribute?

7 posts were split to a new topic: What if I want to limit the number of check boxes that can be selected?

10 posts were split to a new topic: Does the order of label and ID matter?

A post was merged into an existing topic: FAQ: Learn HTML: Forms - Range Input

2 posts were split to a new topic: How does the for attribute work?

2 posts were merged into an existing topic: Does the order of label and ID matter?

2 posts were split to a new topic: How is the information transferred from the checkbox?

3 posts were split to a new topic: How is name used for grouping?

Checkbox Input ![Davie's Burgers Logo](upload://pQE6kIDJ3Sll5mK7lXvze65W7cH.svg)

Create a burger!

What type of protein would you like?
How many patties would you like?
How do you want your patty cooked
Rare Well-Done
    <section class="toppings">
      <span>What toppings would you like?</span>
      <br>
      <input id="lettuce" name="topping" type="checkbox" value="lettuce">
				<label for="lettuce">Lettuce</label>
      <input id="tomato" name="topping" type="checkbox" value="tomato">
      <input id="tomato" type="checkbox" name="topping" value="tomato">
      <label for="tomato">Tomato</label>
      <input type="checkbox" name="topping" id="onion" value="onion">
      <label for="onion">Onion</label>
    </section>
  </form>
</section>

Mine didn’t fit inside the form. onion spilled outside the form.
I had a yellow sign in my code but still ran ok. I wonder why. Any help will be nice. Thanks.

Hello! I have a question about step 8/14 from this lesson. We are prompted to create a label and input pair for new topping options. My question is more of an extension and not necessarily directly related, but I am wondering if there is a way to alphabetize these inputs in a way that doesn’t require that I restructure the code. So, ie., let’s say I’ve created 50 label and input without thinking about alphabetization, could I write a simple ‘wrapper’ that would alphabetize them for me?

If it is a static page, then simply arrange the items in alphabetical order. If it is a dynamic page then feasibly, yes, a script could be written to capture all the items, re-order them, then re-insert in the DOM. It won’t be that simple, though.

Confused. Why isn’t this working? what am I missing? I’ve added the input above the label below the
label…I’m not sure why its not working…it should be the same as the previous code above it…? Someone help?

<section class="topping">
          <span>What toppings would you like?</span>
          <br>
          <!--Add your code below for the first checkbox-->
      <input id="lettuce" name="topping" type="checkbox" value="lettuce" >
					<label for="lettuce">Lettuce</label>
          <br>
      <input id="tomato" name="topping" type="checkbox" value="tomato">
         <label for="tomato">Tomato</label>

Also did it this way...
`				<label for="lettuce">Lettuce</label>
            <input id="lettuce" name="topping" type="checkbox" value="lettuce" >
          <br>
         <label for="tomato">Tomato</label>
           <input id="tomato" type="checkbox" name="topping" value="tomato"> 

but it still says Did you add the new <input> inside the correct <section> element?