Confusion over elements used in label/input elements

1

I’m confused about the elements used in this code:

 <label id="email-label" for="email">* Email: </label>
<input type="email" name="email" id="email" class="input-field" required placeholder="Enter your Email">

In the label element, what purpose is the “for” serving? Does the “email” value of that “for” refer to the input element’s “id” at all?

In the input element, the “name” element groups the elements (if it were a radio button, multiple inputs would share the same name?)

2

The for links the label to the input element. This is especially useful for people using accessibility tools.

1 Like
3

Thanks. I guess I’m confused by the id in the label. I’m trying to understand the code in this example:

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

The labels have ids such as “email-label”, etc. But it doesn’t seem to me that they’re being styled in the CSS. Do the ids in the label elements have a function here? It seems as if some ids have functions and some are used only to style (in CSS)?