5

I have a field in a form where the entered data is usually presented all uppercase. It's a field for a person's code that is similar to a Social Security Number with the difference that it also contains letters. Here in Italy this code is always presented in all uppercase in official documents and in people's IDs etc.

I was thinking to present it in the same way by setting the field style to text-transform:uppercase;.

I tested it by attempting to fill in the form, and I felt a bit frustrated because when entering the code and seeing the letters displayed in uppercase I thought my caps-lock was on.

Have you ever experienced a form that displayed your entered values in all uppercase? If so, what did you think of the experience?

Do you then think it's better to avoid using text-transform in input fields for usability?

Improve this question

3 Answers 3

Reset to default
9

I think that your concern is very legitimate, but there's a simpler solution that can accomodate both sides - transform the text when the field loses focus. It's not very uncommon for fields to change format after the user is done with them. For instance, regardless of the way a user types in a combo box or an auto-complete field, when the focus moves on, the value will be displayed the way it's stored in the system.

Improve this answer
1
  • A good example are the US State codes. They are always displayed in all caps (NY, CA, FL...), and if the user typed them in lower-case characters, they should still be displayed in upper-case, but that change should be implemented after the field lost focus.
    – Vitaly Mijiritsky
    Mar 6, 2011 at 11:30
12

You have mentioned that you find it frustrating and a bit confusing. I believe that most users would feel the same.

The reason for the confusion is because the input box would not be exhibiting expected behaviour. Your learners have spent a great deal of time learning how an text input fields should behave and then suddenly for no obvious reason it changes.

Therefore you should not perform a text transform on an input text field. If you have to save the data in upper case then do it server side and out of the way of the user.

Improve this answer
1
  • +1 for mentioning that it's about meeting expectations. If you're going to break a standard design convention that users will expect, then there has to be a compelling reason why.
    – jameswanless
    Mar 4, 2011 at 19:54
0

I think you are right to be concerned about this. Personally, I have filled up forms that had all caps turned on and it has confused me. I didn't have a problem with the all caps field but would have liked a little indication that it was an all caps filed.

But if some text does need to be displayed as uppercase because it has some legal requirements, then you should do that. However, you should display a little text next to the label to let the users know that this field will be displayed in all caps by default.

Improve this answer

Your Answer

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

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