33

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?

Improve this question
2
  • 28
    Sometimes 'others' are wrong. Very very wrong.
    – Ben Brocka
    May 2, 2012 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.
    – user8697
    May 9, 2012 at 17:58

4 Answers 4

Reset to default
43

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.

Improve this answer
7
  • 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, 2012 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, 2012 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, 2012 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, 2012 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, 2012 at 12:51
18

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. ;)

Improve this answer
2

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).

Improve this answer
1

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.

Improve this answer
8
  • 2
    @RossMcKinley, I disagree. A phone display is usually too small. It is perfectly reasonable for a bit of scrolling.
    – Question Overflow
    Dec 11, 2013 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, 2013 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, 2013 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, 2013 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, 2013 at 12:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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