Forum Moderators: open
Is there any reason to specify a "for" attribute in a label for a text field?
for = idref [CS]
This attribute explicitly associates the label being defined with another control. When present, the value of this attribute must be the same as the value of the id attribute of some other control in the same document. When absent, the label being defined is associated with the element's contents.
So never use "for" with a text field unless there is some other control on the page you must match with an explicit id.
I expect this use to be rare as uaually you want the label to refer to (associate with) the text field contents.
As well as the radio button functionality you mention, I believe the label tag is intended to give hints to the browser particularly for accessibility.
iamlost: I'm not sure how you read that passage and that decided it shouldn't be used, but if you look just a paragraph or so down you will see this example..
<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>
There's no need to use a table to make your form fields line up nicely - you can do this:
label { width: 60%; }
...
<label for="fname">First Name</label>
<input type="text" name="firstname" id="fname">
<label for="lname">Last Name</label>
<input type="text" name="lastname" id="lname">
I don't think it is actually semantically wrong to use a table here.
You are representing tabular data here, but it just so happens that some of it is editable.
I think you misunderstood my post:
Your example is exactly what I said/quoted:
<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>
the "for" in the label is explicitly tied to another control in the page - the "id". This is the common usage.
If a label is used, instead (for example), as a title for a textbox, the "for" may be omitted and the label is associated with the textbox contents rather than a specific id.
The original post queried:
Is there any reason to specify a "for" attribute in a label for a text field?
and I was giving w3 reference that it was not (and may be the wrong thing to do) in some circumstances.
If a label is used, instead (for example), as a title for a textbox, the "for" may be omitted and the label is associated with the textbox contents rather than a specific id.
Surely the labels in the example were being used "as a title for a textbox"?
::confused::
Can you post an example of when the "for" attribute should not be used?
<label for="fname">First Name</label>
<input type="text" name="firstname" id="fname">
like this
<label>First Name
<input type="text" name="firstname" id="fname">
</label>
You don't need to use the for= attribute.
Unfortunately it breaks my neat CSS way of lining the fields up without using a bloaty table. I guess I can't have everything :-(
Perhaps you are confused because iamlost? ;-)
Will try my explanation step by step:
<label for="fname">First Name</label>
<input type="text" name="firstname" id="fname">
<fieldset>
<label for="fname">First Name</label>
</fieldset>
<p>Lots of Descriptive Blah ...</p>
<fieldset>
<input type="text" name="firstname" id="fname" />
</fieldset>
<fieldset>which is "upside down" to usual practice but valid.
<input type="text" name="firstname" id="fname" />
</fieldset>
<p>Lots of Descriptive Blah ...</p>
<fieldset>
<label for="fname">First Name</label>
</fieldset>
<fieldset>
<label >First Name</label>
<input type="text" name="firstname" id="fname" />
</fieldset>
When [for is]absent, the label being defined is associated with the element's contents.
iam-still-lost, are you still confused?
When the control is (one) a text area and (two) the "label" and the "control" are immediately adjacent (order is immaterial) the "for" may be omitted and the label will be associated with the control by default.
To associate a label with another control implicitly, the control element must be within the contents of the LABEL element.
However, as Purplemartin says thats not quite how implicit labelling works.
When the specs say
When [for is]absent, the label being defined is associated with the element's contents.
They mean that the label is associated with the label's contents. e.g the control that appears between <label> and </label>
Here is an example showing implicit and explicit labelling:
<form>
<label for="explicit">Explicit Label with FOR</label>
<input type="checkbox" name="test1" id="explicit" />
<label>Implicit with Element Content
<input type="checkbox" name="test2" />
</label>
</form>
I quite like the implicit style (which does not require a for attribute) but as I said in msg#3 implicit labelling unfortunately doesn't work properly on Internet Explorer - so we are stuck with explicit labelling.
Back to the original question: If I don't associate the label with it's text field (either explicitly or implicitly), am I disadvantaging any users?
Back to the original question: If I don't associate the label with it's text field (either explicitly or implicitly), am I disadvantaging any users?
Yes! Well, ok maybe.
Try one of your test pages and click a label that is associated with a text field (for example). On most modern browsers (I'm tempted to say 'all,' but I don't want to fire up every browser on the system to find out...), clicking on the label makes that form element active - so your cursor should end up inside the textbox. It's potentially useful for people who can't mouse as precisely as they would like to...
-B
Plus if you allow your users to click on label text for checkboxes and radios then doing the same for text boxes keep the interface consistent.
I guess there is also potential for screenreaders etc to use the label information - possibly reading it out when a user tabs into a field - but I'm not sure if any do or not.
