As we are trying to use latest browser technologies we also investigated the usage of the new “placeholder” attribute in HTML5. It offered us a possibility to avoid a custom implementation in modern browsers as technically the value of the input (or text area) element was not filled and not submitted and got hidden as soon as the user focussed that input field. Widely used was a variant with JavaScript replacing the value when the user left an input (technically spoken the “blur” event occurred) and the field was empty.
While introducing jQuery we first thought about using the placeholder attribute and as a degradation in older browsers a similar functionality achieved with JavaScript. A colleague and me ended up in a heated discussion about whether to use a native HTML5 feature or doing it with JavaScript. He convinced me of using the last mentioned way. We also agreed that the custom behavior will be applied when an element has the “placeholder” attribute.
Interaction
Instead of only showing / hiding the placeholder we made it possible that the opacity of the hint gets reduced when the user focus an input. Only when he starts typing the hint really disappears. (Chrome implemented a similar behavior in newer versions. Or to be precise it was implemented by Webkit changeset 121529)
Former mechanism
default
:focus
The big advantage behind this is that the user still sees the hint so he knows what to enter whereas a solution just hiding it helps not that much (besides the fact that the page looks nicer on rendering).
New mechanism
default
:focus
Input available
Technical
HTML5 features are pretty cool but not necessarily what might be the best for the user. Anyway we wanted to use the placeholder attribute as it offers good support in modern browsers (looking at caniuse round about 60%). So we decided to use both. Mostly we are using the placeholder attribute. When it is set on an input element we use some JavaScript code to apply the desired behavior. If for whatever reason the JavaScript is not executed it still offers a good fallback.
Conclusions
Communication and discussions are important and even further necessary to find the best solutions since normally nothing is perfect from the beginning. Relying ONLY on browser features is the easiest and nicest solution from a technical point of view. But as a professional developer you always try to find the best thing that makes everyone happy. =)
About the author
Tobias Krogh works for XING as an enthusiastic Frontend Engineer. JavaScript is his language besides using semantic markup. XING Profile »
Hey Tobias,
we discussed just that a week ago. One conclusion was that in larger forms it’s better to not to rely on placeholders to much since it gets really confusing if you have overwritten the placeholders and don’t have any labels to help you out.
Chris
Hi Chris,
the markup and style was built by a colleague some time ago (I invested some time afterwards to extend the JavaScript as there are several possibilities to insert / remove text). In the meantime WebKit implemented that the placeholder is not hidden only because an input is focussed (as mentioned in the blog article).
So we are working on a more semantical way using labels and placeholders as what they really are: A label tells the user what is the desired content and the placeholder shows examples.
A nice blog post about this topic is also: http://blog.laurakalbag.com/labels-in-input-fields-arent-such-a-good-idea/
Cheers,
Tobi