Why would we want to make a label rather than just put regular text around the input? It seems like it would be the same. Do we do anything with the label?
Associating a <label> with an <input> element offers some major advantages:
The label text is not only visually associated with its corresponding text input; it is programmatically associated with it too. This means that, for example, a screenreader will read out the label when the user is focused on the form input, making it easier for an assistive technology user to understand what data should be entered.
You can click the associated label to focus/activate the input, as well as the input itself. This increased hit area provides an advantage to anyone trying to activate the input, including those using a touch-screen device.
You wouldn’t benefit from all this using <p>Username</p>, for example.
Why do I have to assign the label to input if the label acts just like a heading? You see if i remove for="" it doesn’t make a difference the text inside still acts the same.
The for associates the label with the input field. This is needed for accessibility tools. So that your website can also by used by people who have poor(er) vision and things like that.
It depends how the label element is used. If it wraps the input control, it doesn’t need for since the control is a child element. If it appears before (or after) the input control then it does need for to declare the association.
Run that in your browser. Mouse over the label and click. Notice anything? We’ve given focus to the input control just by clicking the label. This is a huge boost for usability and accessibility.
Not at all. It is perfectly valid to wrap the input control with the label. If there is no need for the id attribute it can be removed, as can the type attribute since the default is text. The name attribute is all that is needed.