Labels and form controls

labels
controls
webforms

#1

Hi, folks!
We received an issue from a customer regarding the cursor behaviour.

The issue is focused on labels and form controls.
Our framework provides a cursor change for all the labels (from cursor:default to cursor:hand).
We decide to apply such rule to make more clear the relationship between labels and controls.
W3C is not clear (or at least I was not able to find a final decision) about this topic. I noticed that on their websites they do not provide any cursor changes when you are hovering a label.

Did u work on such topic?
Which approach did you follow?


#2

I have never seen a cursor change on a label, the only exception is the label for a checkbox as you should be able to click the label to change the checkbox.

Does clicking on the label put the field into focus in your instance?


#3

Indeed it’s not a common behaviour. When we designed the first version of this app we did a research and we find out that there was no strict rule for such attribute. We decided to put cursor: hand everywhere to decrease the learning curve regarding the chance to activate a control via labels.

On W3C even on radio and check they do not provide any cursor changes.
I agree with such approach because controls like check and radio they should always have a label indicating the topic.
For instance: Main label “Gender”, option 1 “Female”, option 2 “Male”

I do believe that we are going to remove this behaviour.

Correct, it’s the normal attribute “for” we applied a CSS rule only for the cursor


#4

Hmm, you have certainly opened an interesting can of worms here! :smile:

I feel like having the cursor change for everything is a step too far, it may take away from main CTAs or links that would be less obvious. And I’m not sure it would be normal user behaviour to click a label to make the field focussed. As a user I would assume that because there is an input field I am to click in there to make it active.

Have you tried doing some A/B testing to see how the form performs with and without the cursor change? I get the feeling that it won’t affect the usability much, but I am probably wrong!


#5

this sentence is my English notebook now…thanks!

I agree with you about the cursor change and we are going to remove such CSS rule.
Regarding the field focus, in my opinion, it’s a “must” semantically each label should have its own “for” attribute.

No, we did not perform any test. This is a proof of concept and only one customer is using it, we are not sure if it will be released with our suite.