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.

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>
8 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.

2 Likes

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

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

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>
3 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.

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

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.