autocomplete example's labels aren't associated with their inputs

[ryandesign]

MDN URL

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete

What specific section or headline is this issue about?

Try it

What information was incorrect, unhelpful, or incomplete?

<label for="firstName">First Name:</label>
<input name="firstName" type="text" autocomplete="given-name">

<label for="lastName">Last Name:</label>
<input name="lastName" type="text" autocomplete="family-name">

<label for="email">Email:</label>
<input name="email" type="email" autocomplete="off">

What did you expect to see?

I should be able to click each label to focus the associated input. This doesn't work (tested in Safari 16.4) because the for attribute of each label specifies a nonexistent id. The form inputs each have name attributes but don't have id attributes.

Do you have any supporting links, references, or citations?

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

To explicitly associate a <label> element with an <input> element, you first need to add the id attribute to the <input> element. Next, you add the for attribute to the <label> element, where the value of for is the same as the id in the <input> element.

Do you have anything more you want to share?

No response

MDN metadata

Page report details

• Folder: en-us/web/html/attributes/autocomplete
• MDN URL: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
• GitHub URL: https://github.com/mdn/content/blob/main/files/en-us/web/html/attributes/autocomplete/index.md
• Last commit: mdn/content@eb18c44
• Document last modified: 2023-05-09T13:21:58.000Z

[Phil-G-94]

Hi,

Indeed - putting an ID corresponding to the 's for attribute resolves the problem. Happy to fix the source if anyone would like to assign.

[wbamberg]

@Phil-G-94 , thank you for volunteering, it's all yours!

[Phil-G-94]

Thank you @wbamberg :) Now fixed. Please see here.

Please don't hesitate if any issues with fix/further work needed.

[github-actions]

It looks like this is your first issue. Welcome! 👋 One of the project maintainers will be with you as soon as possible. We appreciate your patience. To safeguard the health of the project, please take a moment to read our code of conduct.