What's the "for" for in a label tag?

HtmlFormsUsability

Html Problem Overview


Just ran across a for parameter in an HTML label 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'm converting this form to a PHP processed script, can I get rid of the for= parameters? (And out of curiosity, what does it do?)

Html Solutions


Solution 1 - Html

From w3schools.org:

> The

HTH!

adding my $.02 as an Accessibility SME - as well as usability, the LABEL also associates the input field with the correct label so persons using screen readers will know what the field is for.

Solution 2 - Html

The HTML label tag defines a label for a form element. They're usually used with checkboxes and radio buttons, and when the user clicks on the label it toggles the button. With a text input (and you'll have to check this to be sure) I think it only gives focus to the input when the user clicks the label.

Solution 3 - Html

It specifies to which element that label is bound to. In your sample code the label is there for the required-firstname input field. If the user clicks on that label, the focus will go to the bound input field. It's a usability improvement and I think you'd be better off leaving it as is. It's a good practice.

Solution 4 - Html

The "for" attribute is a necessary element for the accessibility of your form. Do not omit it. For someone using a screen reader (SR) to have a web page announced to them, the "for" attribute relates the control to the label. Typically a SR user will tab through a form, from one control (which is a focusable element for the SR) to the next. Without the "for" attribute, the SR user will have to change modes on the SR and probe around the form to try and determine which control matches which label, which can be time-consuming and confusing. The "for" attribute can also be useful for assistive technology relating to motor issues.

WebAIM.org has a great page explaining the accessibility ramifications of "for": http://webaim.org/techniques/forms/controls

Solution 5 - Html

It ties the label to a form element id. Some form elements, like checkboxes, can be activated by clicking on their label.

Solution 6 - Html

In some browsers when you click on a text in a for tag, you'll check the box it's associated with (i.e. the for = id) or put the focus on that box. It's an ADA thing

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionlynnView Question on Stackoverflow
Solution 1 - HtmlJonasView Answer on Stackoverflow
Solution 2 - HtmlBill the LizardView Answer on Stackoverflow
Solution 3 - HtmlPawel KrakowiakView Answer on Stackoverflow
Solution 4 - Htmluser3219915View Answer on Stackoverflow
Solution 5 - HtmlVirtuosiMediaView Answer on Stackoverflow
Solution 6 - HtmlPeter TurnerView Answer on Stackoverflow