What is the purpose of “linking” elements with “for” and “id” ()?
ID:
fCC is saying " The id
attribute is used to identify specific HTML elements. Each id
attribute’s value must be unique from all other id
values for the entire page.
Add an id
attribute with the value indoor
to the radio button. When elements have multiple attributes, the order of the attributes doesn’t matter.
- Why do I need to add an “id” attribute as opposed to a “name” attribute? Aren’t they the same thing essentially? My code already has “Indoor” written as text:
<label><input type="radio"> Indoor</label>
Why can’t I just leave it like that ? (Why the “id” attribute?)
Accessibility.
Linking a label to an input allows people using assistive technology (such as screen readers) to know what the input is for. Technically, if you nest the input inside of the label then you shouldn’t need the for
attribute on the label because the link between the two should be implied. But there are a few very specific situations in which the implication doesn’t always work. So it is considered a best practice to always link the label to its input using the for
attribute.
Because the for
attribute only works when its value is set to the id
of the input. It doesn’t work with the name
attribute.
you can absolutely do that, but when you need to use “label” and “input” separately you need to have a way of “linking” these two elements together, and thats what you do with “for and id” attributes in “label and input” elements
also for “accessibility” and “conventional” uses its customary that we use “linking” between label and input elements in html
perhaps consider reading through this mdn article, would be helpful, <input>: The Input (Form Input) element - HTML: HyperText Markup Language | MDN happy reading 