Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I'm a web developer having a weird UX issue. When I build HTML forms, I ensure that every input's label is implemented through a <label></label> tag and that each label uses the for attribute to associate it with the input. For example:

<label for="firstName">First Name</label>
<input id="firstName" type="text" />

<label for="lastName">Last Name</label>
<input id="lastName" type="text" />

This follows what I've always heard is an accessibility best practice. It also has what I consider an added benefit of focusing the input when the label is clicked.

Others here disagree on that last point.

They actually say that it's weird that clicking the label focuses the input, and that it's "non-standard" behavior. Since I'm using what I consider standard HTML practices, I would think that is is indeed standard. Perhaps this is just their reaction to the fact that other pages in the site doesn't use real labels and don't have this behavior, but they seem to genuinely hate this label behavior.

I don't understand. Am I in the wrong here? Is it considered bad UX practice to have labels focus an input? If so, why? If I need to fix this, is there an alternate way to make an input more accessible without using a label?

share|improve this question
21  
Sometimes 'others' are wrong. Very very wrong. –  Ben Brocka May 2 '12 at 20:50
4  
"They actually say that it's weird that clicking the label focuses the input, and that it's "non-standard" behavior." And my answer is: So what? Associating the label with the input has no downsides (or at least, none that they brought up to you). The alternative is that clicking the label does nothing, so you lose something and gain nothing in return. When saying something shouldn't be done, you should list some downsides other than "it's not standard". If we only ever did everything the way it's been done before we would never make any progress in anything. –  Phong May 9 '12 at 17:58
add comment

4 Answers

up vote 32 down vote accepted

I cannot understand why you'd want a reduced click area for your form field. Including the "for" attribute on the label tag allows you to increase the clickable area. It has been a web standard for quite a while and I would think most users are used to the behavior at this point, making it a convention. While it may not be a convention in software, I would definitely consider it a web convention.

The best benefit here is for sure increased accessibility (see the section on form input labels).

I do not think this simply applies to check boxes and radio buttons. I have seen cases where it's handy to use for text inputs as well, although definitely not as much of a help as with radio buttons and check boxes.

You can see also that W3Schools mentions it as a usability improvement right in there reference, while admittedly it may not be the best reference. However, if you look at the HTML 4.01 specification the label tag's "for" attribute is to ensure it is explicitly associated with another control, and the specification explicitly mentions that "When a LABEL element receives focus, it passes the focus on to its associated control".

As with this web design blog, I also find that it is a usability "crime" when the field and the label are left unassociated.

share|improve this answer
11  
Good answer, but I should point out that W3Schools is most certainly NOT the same as W3C. Please read w3fools.com for details. –  JonW May 2 '12 at 20:31
2  
Whoops, totally missed that this time around. I did know that in the back of my head somewhere. Updated the post. –  GotDibbs May 2 '12 at 20:32
    
Thanks for your answer. These links will be helpful if I need to continue justifying my use of labels. –  Jacob May 2 '12 at 20:51
1  
This can be helpful on a touchscreen, too, where an input field may be hard to focus on without zooming. –  TomG May 3 '12 at 12:34
4  
I created an account to upvote this answer and question. I hate interacting with forms which have foregone this simple practice. –  Scott May 3 '12 at 12:51
show 2 more comments

Those 'others' are incorrect. This is the intention of the HTML label tag and the proper implementation. Aside from the accessibility necessity, it's also a huge UX benefit especially with things such as checkboxes, where it's usually easier to hit the label than the tiny checkbox.

If these 'others' hate it, tell them to stop clicking on the labels. ;)

share|improve this answer
add comment

The behavior is not common in user interfaces, and it probably just reflects how label works for checkboxes and radio buttons (clicking on the label toggles the state, and this corresponds to common UX design and is very useful). For textboxes, the feature is neither particularly useful nor harmful. Any attempt to prevent it with JavaScript probably causes problems instead of solving any, and not using label is bad for accessibility (since assistive software makes other use for label markup).

share|improve this answer
add comment

This is quite debatable.

For a touch device, expanding the clickable area, especially in the case of text input may actually be counter-productive if the user's intention is to scroll down the form instead of filling the input.

share|improve this answer
2  
@RossMcKinley, I disagree. A phone display is usually too small. It is perfectly reasonable for a bit of scrolling. –  Question Overflow Dec 11 '13 at 12:04
2  
@RossMcKinley Anything but the most trivial of forms is likely to scroll on a mobile device. It doesn't mean the form is too big. –  Matt Obee Dec 11 '13 at 12:04
2  
@RossMcKinley they may need to scroll to edit a field they've already entered. They may need to scroll to see what they entered in a previous field. They may need to scroll because they are applying for a passport which requires 2,000 field inputs... –  JonW Dec 11 '13 at 12:13
1  
@JonW If any of those scenarios are the case, the form is badly designed. Sure, in some cases it's unavoidable. In any case, the OS should determine between taps and drags. –  wrossmck Dec 11 '13 at 12:17
1  
@RossMcKinley: Well if you're able to design a passport application form that fits on an iphone screen in a usable, easy way (including displaying any feedback / error text) - so basically in about 4 text fields - I'd be pretty impressed. –  JonW Dec 11 '13 at 12:21
show 3 more comments

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.