Shouldn't "for" and "id" match between label/input elements?

1

In the email section of the form for the 2nd Web Design Project, the for element of the label does not match the id element of the input:

https://codepen.io/freeCodeCamp/full/VPaoNP

The for is “age” and the id is “number”. Is that a mistake? Or is there a reason (that I don’t understand) that they are different? It was my understanding that it was important that they match (though TBH I still am unclear why it’s important they match).

<div class="rowTab">
      <div class="labels">
        <label id="number-label" for="age">* Age: </label>
      </div>
      <div class="rightTab">
        <input type="number" name="age" id="number" min="1" max="125" class="input-field" placeholder="Age">
      </div>
    </div>
2

it is important they match to create a connection between the label and the input, for screen readers for example

Thank you for helping make FCC better. Bugs can be reported as GitHub Issues. Whenever reporting a bug, please check first that there isn’t already an issue for it and provide as much detail as possible.

1 Like
3

Yes, it’s a mistake. Just to add more clarity:

  1. When you click the label, the relevant input comes into focus. This is super useful from a usability point of view.
  2. Related to that, it means you can put the label anywhere in the HTML, and clicking it will still focus that input (this enables some weird hacks as well).
  3. It is important from an accessibility point of view, because it explicitly links the input with a description of what the input is, as @ilenia says .
1 Like
4

Thanks. Just so I understand, what do you mean exactly when you say it “comes into focus” (perhaps I don’t understand this because I don’t really understand how a screen-reader works). Like, does it emphasize it somehow? Literally speaking, if it’s an “email” label (assuming it’s all coded correctly), when I click the email label, it highlights the corresponding input section? (so if I start typing, it will be typing into the “email” input?) Thank you both!

5

I see how it’s working… No need to respond, thank you!!!

6

Yeah, just from a general UI point of view (particularly if you’re using a touch-screen device, which tbh is where most web trafic is coming from), being able to click the label to focus the input makes it much easier to use.

Re screenreaders and assistive tech, I’d recommend watching someone using and talking about using a reader, like:

(second one is excellent w/r/t a big site that is at times seriously screenreader-unfriendly)

1 Like
7

Great I’ll check those out. Thank you!!!

8

Thanks that was really informative! I see the importance of using different elements to label things appropriately (even if they appear essentially the same on a page to someone with normal vision)…