FAQ: Learn HTML: Forms - Checkbox Input

this doesnt look like all the code. there is a third input that needs to be added. is it inside the correct section?

Hi! I’m wondering why label and input are created on separate lines instead of nesting them like so:

<label>Type something here<input type="text" id="something" name="something"></label>

Are there advantages to NOT nesting them? I like nesting because

  1. the code is shorter
  2. the label and input are grouped together visually in the code
  3. you can position the label text before or after the input field easily

What is the best practice and why?

Thank you!

In regards to the HTML Forms Checkbox Input lesson, why is span used for “What toppings would you like?” instead of either a label or a h1 tag?

How come I got the answer right on the last part but I don’t see a checkbox on the final product

section class=“toppings”>
What toppings would you like?


Pineapples
<input type=“checkbox” name=“topping” id=“pineapples” value=“pineapples”

				<label for="lettuce">Lettuce</label>
     <input type="checkbox" name="topping" id="lettuce" value="lettuce"

      <label for="tomato">Tomato</label>
      <input type="checkbox" name="topping" id="tomato" value="tomato"

On 8/14
I notice that the opening ‘form’ element does not contain the attributes ‘action’ or ‘method’ …Have I missed something (very very possible) OR has it been omitted as it isn’t the focus of this section OR is it not relevant in this instance, if the latter then why?

p.s the questions and the answers this community provides are excellent and of great help so thank you to all who participate :slightly_smiling_face:

When there is no ‘action’ then there won’t be a ‘method’. However, the action attribute should be present and set to an empty value.

action=""

This is in the WAI-WCAG as ‘required’.

When there is a Submit type input, but no action (nor method) then a script should be capturing the event and event.preventDefault() should be invokeded.

Thank you, I think I got that. In the case of this lesson then, do you think the ‘action’ is set to empty (we’ll pretend it was included) as for the purpose of this exercise it wasn’t necessary to specify a destination, as we’re learning the basic structures and syntax its fine for the form to submit to the current page?
Never programmed/dev’d before, JS is on my list for next Q which is were I assume the event.preventDefault would come in.)

Yes, for the purposes of learning the syntax and usage of the various controls it is fine to not have a destination.

If I’m not mistaken, the default method is GET, so once you submit your form it should display a query string in the location bar of the LE browser:

https://localhost/?patty=beef&amount=2&doneness=3&topping=lettuce&topping=tomato&topping=onion

It sometimes adds to the information overload when too much is injected into a lesson. We can see how this lesson is about syntax and usage and the author likely ruled out as much as possible to keep things simple and easy to absorb.

<form action="">

is a small step for down the road that will be easy to understand, given the necessary background information learned here.

1 Like

Why doesn’t setting a max number of patties like this seem to work? I can still type any number I like, even a million patties (which is, let’s be honest, not really feasible). It only affects the number I can enter with arrows

<label for="amount">How many patties would you like?</label>
<input type="number" name="amount" id="amount" max="5">

Which is by design. The max attribute only applies to the control (limiting the range), not the input value.

If the user enters a value via the keyboard, our script will need to monitor the value and reject any that are out of range (essentially alert the user, or simply clear the field or reset to zero, or some default value).

You mean it’s JavaScript’s job, don’t you?

2 Likes

I can’t help but feel like the comments for this exercise are misplaced. Here’s how they’re formatted:

  <section class="toppings">
          <span>What toppings would you like?</span>
          <br>
          <!--Add your code below for the first checkbox-->

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


        </section>

I feel like all the comments should be moved down one. For example the 1st checkbox comment should be under the given code for the lettuce option, the 2nd checkbox comment should be under the given code for the tomato option and the 3rd checkbox comment should be after the 2nd comment.

The <input> code is supposed to follow the <label> code. Unless I’m mistaken.

Challenge in question

If the input control has an id attribute and the label a corresponding for attribute the label can be on either side. When the attributes are left out, the input control needs to be inside the label element.

1 Like

Understood, throughout the provided lessons the input has always been put under the label so this is news to me.

Thank you very much :pray:

1 Like

You’re welcome. I left out the point that when the input is inside the label, the text can be on either side of the control.

1 Like

Am I the only one that thinks the positioning of the checkboxes is visually confusing? The checkboxes aren’t next to their own labels. For instance, the checkbox for lettuce is right next to “Tomato”. How could I fix this?

daves_burgers

Here is the markup that renders the above view:

      <form>
        <h1>Create a burger!</h1>
        <section class="protein">
          <label for="patty">What type of protein would you like?</label>
          <input type="text" name="patty" id="patty">
        </section>
        <hr>
        <section class="patties">
          <label for="amount">How many patties would you like?</label>
          <input type="number" name="amount" id="amount" min="1" max="3">
        </section>
        <hr>
        <section class="cooked">
          <label for="doneness">How do you want your patty cooked</label>
          <br>
          <span>Rare</span>
          <input type="range" name="doneness" id="doneness" value="3" min="1" max="5">
          <span>Well-Done</span>
        </section>
        <hr>
        <section class="toppings">
          <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>
          <!--Add your code below for the second checkbox-->
          <input id="tomato" name="topping" type="checkbox" value="tomato">
          <label for="tomato">Tomato</label>
          <!--Add your code below for the third checkbox-->
          <input id="onion" name="topping" type="checkbox" value="onion">
          <label for="onion">Onion</label>
        </section>
        <input type="submit">
      </form>

The spacing is controlled by this selector rule:

.toppings label, .cheesy label {
  margin-right: 25px;
}
1 Like

So I had a question regarding the spacing of the checkboxes and labels. I noticed the example used has barely any space between the labels and the checkboxes. When I added the inputs into the burger code, there was a lot more space between the checkboxes and the labels. I didn’t really do anything different from a formatting perspective.

Is this related to CSS usage with the example or perhaps a difference in the browser?