So what’s the purpose of name
then? It’s prepended to whatever a user might enter in a form, but I can easily imagine id
s do the same job. Why did HTML creators add a separate name
attribute?
That’s a good question considering the fact that id and name are similar in the way they both identify data. However, they differ in their goals / purposes:
-
id is a global attribute (meaning it can be used on any HTML element) that can be used to uniquely identify an element within the HTML document. By doing so, one can target said element using for example CSS or JavaScript.
-
name isn’t a global attribute. It can technically be used by most of the HTML elements but its only ‘standardized behavior’ works with form elements (input, textarea, select, etc, …) and using it on non form elements can have unpredictable effect / behavior so it is not recommanded. It is used to identify the form control when the form is submitted to the server (its value is then sent as part of the form data).
To summarize and answer your question, it’s true that id attribute can be used to identify form controls BUT the name attribute’s purpose is in relation to form submition, it is used to identify data that corresponds to a particular form control.
the for attribute of the label element should be same as the id attribute of the input element. this is done in order to associate the label element with the input element.