I often find myself in the situation where a design calls for form inputs to transform the user’s text. It’s pretty easy to do nowadays:
input[type="text"] {
text-transform: uppercase;
}This is what it looks like:
But – I’ve always found these types of interactions frustrating whenever I come across them. The expectation of the user is jarred when the user’s input changes unexpectedly. I decided to do some research and found a couple of posts on the subject.
Is text-transform uppercase frustrating when used in input form fields?
Here’s a discussion on UX Stack Exchange that suggests transforming the text after the field loses focus. This javascript solution does seem slightly better than a simple CSS transform – but I still find it awkward when I come across these forms.
The User Experience (UX) Of CSS Text-Transform On Form Input Fields
Ben Nadal wrote an interesting commentary about how CSS transforms on form inputs causes frustration and confusion. I agree with him here.
So what’s the best way to do it?
I say – don’t ever transform a user’s input in a form field. User’s have come to expect forms to act in a certain way, and changing that (even for the better) gives your form an extra learning curve.
If you really need to transform the user’s input somehow, I did come up with an elegant solution recently – by showing the user a summary of their form input (after or while they’re filling in the form) you can get the best of both worlds.
The user can refer to the form where the text that they have input remains unchanged. At the same time, they can see the summary where they text that they’ve input has been modified in some way.
I’d be interested to hear if anyone has any thoughts or findings on the topic in the comments!