How to make the input placeholder more user friendly

I’ve always loved placeholder text for input fields. Not too long ago the only way to achieve this would be to create a special javascript function that enabled the desired functionality, but now it magically comes pre-built into HTML5. Incase you’re wondering, placeholder text is the text within an input field that disappears once you click on it. It’s often used in place of a label.

Placeholder text can be very helpful and can save a lot of page space while also being aesthetically pleasing. With this great feature, however, comes a problem: If the placeholder text is being used in place of a label, it can become very confusing when you focus on the field and the ‘label’ disappears.

It’s important for users to know:

What field they are currently on

What field they have filled in

Typical input placeholder problem

Which input field am I on?

Based on the image above, it’s impossible to tell what the first/focused field is. It is relatively simple to deduce it’s either a ‘username‘ or ‘email‘ field. The only way to find out which field you’re on would be to remove all the text in the field and blur (lose focus). I have personally been caught by this dozens and dozens of times and I find it very annoying.

One method that websites, such as Twitter, have been adopting is to have the placeholder text fade out slightly on focus, but only disappear once the user inputs some text. This is arguably the way that the HTML5 placeholder should work by default.

An improved version

Normal Placeholder text

Placeholder text fades out slightly on focus

The input field is unknown once text has been added

The title attribute is used to add information

The method that the Twitter login system uses is a big step up from the problem in fig.1, however the same problem still exists once the user has added text.

The title attribute has been used here so a user can see the placeholder text by hovering over the input field which is a great addition. Unfortunately in general, I still don’t feel this is as very user friendly as it could be.

The solution

I would like all of the bonuses of both the placeholder method and the standard label method. I’ve decided there is one basic way to achieve this: Have either the label of the input field or an appropriate icon appear to the right of the field after the field has received focus.

So that’s it, in this tutorial I’m going to show you how you can make a form with placeholder text that is semantic, user-friendly and degrades gracefully for legacy browsers.

The HTML

The following HTML is normal <form> markup. It’s what we do with the CSS that really matters.

So the label is absolutely placed behind the input field. On focus the label moves to the right while the input’s background fades to a lower opacity. This gives the illusion of the label sliding right while fading in.

That’s pretty much all there is to it. I think it’s a neat little trick.

Let’s give IE a bit of love

As always, IE spoils the party, but as always Modernizr is here to save the day. We can get the form to act almost identically (sans animations) on IE8 and functionally on IE 6 and 7. Firstly, make sure you’ve given either the <html> or the <body> tag IE specific styles. For example:

Also, notice I’ve included Modernizr. I make use of Modernizr on pretty much every project I work on. It allows me to feature detect with javascript and I can make some pretty cool fallbacks with that.

Detects for the placeholder attribute support. If no support is found, it continues

It then looks for all input elements with the placeholder attribute

It then takes the placeholder value and puts that within the ‘value’ attribute

When focus is given to the element the value is set to none

When blurred, if the value attribute isn’t nothing, it leaves the text alone

If the value attribute is nothing, it replaces it with the placeholder text again

Foreseeable problems

The user can’t see the text if the input is full of characters.

True story, but the opacity of the label is so low that it doesn’t really interfere with the readability of the text itself. A way around this would be to add padding-right which covers the length of the label. The only downside to this would be the input field having to be very long.

In general I think this is fine, but if you’re very worried about this, I’d say add padding-right to the label and use icons instead of text. This will save a lot of space.

Conclusion

I think it’s a pretty solid technique that will leave your website visitors — or me at least — happier and less confused while logging in.

In this specific example the inputs are very large so it’s not really a problem, also if it does overlap it’s not really too noticable (in this example). However, in situations where you don’t have a lot of input space it’s probably a better idea to use an icon (with input padding to stop the text from overlapping) instead of text.

Good article, reflects alot of the practices I employ for web forms using HTML5. I have found the modernizr placeholder fallback to be troublesome, as the premise of the fallback is using the val attribute of the input for the Placeholder text. This causes me issues with validation and storing the info into a database.

Yeah, using the placeholder as the value is definitely something to look out for! I would typically add simple javascript validation for !Modernizr.input.placeholder and check that the input fields should not be empty AND the values should not be equal to the placeholder attribute. That takes care of the “empty submit” problem.

This Is Good But remember as most of user still using IE6 & IE7 as you can find on installation of windows default browser version is 7 and this is looking ugly on IE6 & IE7 … but better for safari, firefox, …

I have small sulotion as placeholder with javascript..

it’s the same as placeholder but the only problem i have for this , it’s password field the enter text will be show up like hidden…

I’m using jQuery on my site, but i’m finding it can take a while to load. Now i tried minifying the scripts and running the site through a speedtest site and it had little impact. Is there any good way to compress images/css/js on the fly? or cache commonly used code?

If you use the google CDN to load jQuery, chances are the person already has it in their cache so they won’t have to load it. Use scriptsrc to get your javascript library links.

As for other images, css and javascript:Images – Use a sprite as often as you canCSS – Make sure you only have 1 css file and minify it, there’s not much more you can do with that.Javascript – I’d say minify and concatenate the javascript – I put all my plugins in plugins.js for example

Thanks! Very cool and useful plugin. Yeah javascript is definitely necessary for a solid and equivalent cross-browser experience. I’d definitely progressively enhance and just use CSS for personal projects but companies aren’t /always/ as forgiving I’m sure I’ll use your plugin in future, thanks for the link.