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

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

#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


#2

The id

If you wrap a form control element inside a label, then the label is for that form control element. You only have to use the label for attribute, when you do not nest the form control element inside the label element. It will not hurt to put the for attribute all the time. That way you never have to worry about if it is wraps a form control element or not.


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