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?

I wonder why we need to use value attribute in this type. Is that because it let the name attribute know what would be paired with it ?

The value attribute need not be included in the markup if it is "". Only if we wish to establish a default value would we populate that attribute. The browser will insert the attribute when and if the user inputs something. Then it is paired up with the name attribute as its key in the post data associative array.

name => value

Hello,
I have a quick question, please.
If in the code below, the name attribute was “toppings” (same spelling as the class =“toppings”), would there be an issue? (example clash in CSS)
Thanks in advance for your reply.

<section class="toppings">
          <span>What toppings would you like?</span>
          <br>
          <label for="lettuce">Lettuce</label>
          <input id="lettuce" name="topping" type="checkbox" value="lettuce">

          <label for="tomato">Tomato</label>
          <!--Add your code below for the third checkbox-->
        </section>

(HTML Forms - Checkbox Input)

No. they are different attributes (and spelling) so will not conflict.

1 Like

Thank you :slightly_smiling_face:

1 Like