Does the order of label and ID matter?

One thing I had to figure out on this exercise was whether it mattered if the or code line came first. I discovered that it does matter for the position of the checkbox in relation to the label; but that as long as the “for” and “id” attributes matched, they would still be linked.

3 Likes

The for and id attributes are only needed if the label does not wrap the input control.

<label for="name">Name</label>
<input id="name">

or,

<label>Name <input></label>
44 Likes

Thank you! Sorry I didn’t proof my comment, there are words missing! Should have said “whether it mattered if the ‘label’ or the ‘input’ code line came first.” I had to search for the answer, and didn’t express it well. Rank beginner.

6 Likes

My question is how do i get this last checkbox beside the “lettuce”

1 Like

Did you try switching the labels around just to see how it would present?

10 Likes

never did but i will thanks

1 Like

In this exercise i found out the two tags have different kind of arrangement of attributes and that’s quite bothering. Is there any common way or pattern to arrange them?

Could you describe your concern with a couple of examples?

Should the input come before the label?

The label can be written anywhere, before or after if it uses a for attribute and the input has a matching id attribute.

<label for="example">Example </label>
<input id="example">

or,

<input id="example">
<label for="example"> Example</label>

We can also wrap the input, and not need to use either for or id, and we may write the text on either side of the input control.

<label>Example <input></label>
<label><input> Example</label>
28 Likes

Keep in mind that reversing the order of the <label> and <input> elements will inevitably also change their order of appearance on the rendered page.
'Hope this helps.

3 Likes

It shouldn’t matter. They are both inline elements so will remain on the same line.

1 Like

But it does matter, since the checkbox itself will render before or after the label’s text content depending on the order you insert those two elements in your HTML code.
Cheers

6 Likes

It’s a matter of design. There is no one rule for how checkboxes should be positioned. The can be after or before the label. If the input control is not enclosed in the label, for-id keeps the two bound to each other.

3 Likes

On the exercise, the class is “toppings” but on each individual checkbox, we use the name “topping” – does html recognise this plural/singular? or is the name not actually referring to the class/not need to be related?

The class will help in styling the control display, but is not the name of the POST DATA. The two purposes are very different. One singles out the element for CSS, the other identifies the data to be sent to the form handler.

2 Likes

Hi,

Please insert a line break
after What toppings would you like? to resolve this.

I did the same - flipping the label and input elements moves the check box.

1 Like

Thank you! :heartpulse: :heartpulse: :heartpulse: :heartpulse:

For this lable <label for="tomato">Tomato</label> if I use <input type="checkbox" id="lettuce" name="topping" value="lettuce"> than also I am getting correct output(i.e. checkbox above tomato !) . Why ? There is no difference whether I use id =“lettuce” or id=“tomato” in tomato label ?