What is the “for” in the tag tag?
Just ran through the for parameter in the HTML tag tag:
<label for="required-firstname"> First Name </label> <small>*</small> <input name="required-firstname" type="text" tabindex="2" id="required-firstname" size="24" maxlength="40"> I convert this form to a processed PHP script, can I get rid of the for = parameters? (And out of curiosity, what is he doing?)
From w3schools.org:
The tag defines the label for the input element.
The label element does not display anything special to the user. However, it provides usability improvements for mouse users, because if the user clicks on the text inside the label element, he switches the control.
The for attribute for the tag must be equal to the id attribute of the associated element in order to bind them together.
NTN!
adding my $ .02 as SME Accessibility, as well as ease of use, LABEL also associates the input field with the correct label so that people using screen readers know what this field is for.
The HTML label tag defines the label for the form element. They are usually used with checkboxes and radio buttons, and when the user clicks on the label, he switches the button. With text input (and you will definitely need to check this out) I think it only focuses on input when the user clicks on the label.
It indicates to which element the label is bound. In your sample code, there is a label for the input field of the required first name. If the user clicks on this label, the focus will go to the linked input field. This is an improvement in usability, and I think you better leave it as it is. This is a good practice.
It associates the label with the identifier of the form element. Some form elements, such as check boxes, can be activated by clicking on their label.
The for attribute is a necessary element for the accessibility of your form. Do not miss this. For those who use a screen reader (SR) to declare them a web page, the for attribute associates a control with a label. Typically, the SR user will insert the form through one control (which is a custom item for SR) for the next. Without the “for” attribute, the SR user will have to change modes to SR and probe around the form to try to determine which control matches that label, which can be time consuming and confusing. The for attribute can also be useful for assistive technologies related to motor problems.
WebAIM.org has an excellent page explaining the difference in accessibility for "for": http://webaim.org/techniques/forms/controls
In some browsers, when you click on the text in the for tag, you will either check the box associated with it (for example, for = id), or focus on this field. This is an ADA thing.