Build a Survey Form - using 'for' correctly in <label> tag

HTML-CSS
1

Hi everyone! This is my first forum post so please be kind :grinning:

I’m not stuck (yet!) but would like to get something clear in my head so here’s my question:

When you use ‘for’ inside the html label tag, should it match the id of the corresponding form control or should it match the name? There seems to be a contradiction in what FreeCodeCamp has taught me and what I’m seeing in the Survey example project.

The Applied Accessibilty section states that the ‘for’ part should match the id.
https://learn.freecodecamp.org/responsive-web-design/applied-accessibility/improve-form-field-accessibility-with-the-label-element

However, the label for the drop down list in the survey example shows it matching the name and not the id.

Can anyone tell me which is correct?

Thanks in advance for your help.

Anya

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/responsive-web-design/responsive-web-design-projects/build-a-survey-form

3

Thanks for the detailed explanation, randelldawson. I wasn’t aware that it was normal practice to wrap a form control element inside a label.