Hi,
I have a doubt about why input element can’t be enhanced to support a label as an attribute instead of having it as a separate element associated with input element.
If this was already discussed before, appreciate if anyone can point me to the corresponding thread.
If there is another group where such topics are discussed, please redirect me there to learn from the discussions.
I am a newbie in Web technologies and learning HTML, CSS3 and Javascript.
Thank you
-Giridhar
Hey @girigold. The add-ons probably isn’t the best group to use to learn about web development in general. MDN has a Common questions article that might be of some help. You might also want to take a look at the Learn web development or MDN Curriculum sections of MDN. Google also offers some similar resources, namely their Learn web development courses on web.dev.
As for a learning community, I’ve personally heard good things about DEV (dev.to). I don’t know too much about them myself, but I trust Ali Spittel and will defer to her guide: A Beginner’s Guide to Dev.to .
As for your question, I’m not sure I follow. If you’re asking, “why are <input> and <label> are two different elements,” I’m not 100% sure, but I have a guess. If you meant to ask something else, well, apologies.
The Label element was introduced in HTML 4.0 back in 1998, and that version of the spec says:
Some form controls automatically have labels associated with them (press buttons) while most do not (text fields, checkboxes and radio buttons, and menus).
For those controls that have implicit labels, user agents should use the value of the value attribute as the label string.
As described here, some elements used to interact with forms already have recieve a label from the element’s value attribute. As a result, adding a label attribute to one of these form controls could make that element could be confusing.
There are also a number of different types of elements that a <label> could be used with besides just <input> elements. If “label” were defined as an attribute on <input>, web browsers might not have been able to use that implementation for other elements like <select>, <option>, <textarea>, <form> and so on.
The final thing I’d note is that when <label> was introduced, table-based layouts were very common. The first example from the spec actually shows how a label might be used in a table:
<FORM action="..." method="post"> <TABLE> <TR> <TD><LABEL for="fname">First Name</LABEL> <TD><INPUT type="text" name="firstname" id="fname"> <TR> <TD><LABEL for="lname">Last Name</LABEL> <TD><INPUT type="text" name="lastname" id="lname"> </TABLE> </FORM>
With this type of page structure, it’s very useful to be able to have the label be independent from and separately style-able from the from control itself.