2

This question already has an answer here:

Is there any convention what to use as placeholder for contact forms?

I came up with two possible options. One is using a fake name as placeholder, with a label on the side of the input. The other one is using the description of the input as placeholder.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

The version with the labels seems to be more clear, because you still have the description along with the field. But the placeholder fake name seems to be outdated.

The other version is neat and fits in occasions where there is not much space.

Are there some guidelines to follow? Or is this just a subjective decision?

marked as duplicate by msp, Graham Herrli, Evil Closet Monkey, Benny Skogberg May 18 '15 at 20:03

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

5

I like Googles vision on this. The user should always know what the input field means, even when a user is focussed on an input field (and the placeholder disappears). Take a look at the material design guidlines:

http://www.google.com/design/spec/components/text-fields.html#text-fields-multi-line-text-field

I also like this tutorial about floating labels:

https://www.airpair.com/frontend/posts/tutorial-angularjs-css-floating-labels

enter image description here

1

User should always know what he is doing or what information needs to be entered

Always use Descriptive labels like

Enter Your name

Enter a valid email

and never use Submit on a form button, it must be descriptive too

Here are few JQuery and JS plugins for Floating Labels

http://clubdesign.github.io/floatlabels.js/

http://labs.mikemitchell.co.uk/FloatLabelJS/

  • In my opinion you should not use Javascript when there are so many simple CSS only options for floating labels. The first example I could find just by asking Google: codepen.io/simoberny/pen/gpddYQ – laEm Jan 29 '18 at 8:42

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