Input Prompt mini
Also known as: Labels Within Inputs
Input Prompt is an info text placed inside a text box. It guides the user on how the text field should be filled or how it can be used. The input prompt inside a text field will disappear if clicked, therefore an Always Visible Input Hint or Dynamic Input Hint should be used in situations where it’s important for the user to see the info text while answering.
Input Prompt helps users understand how to fill in the input fields without having to guess. Also, by using Input Prompt the label of the text field can be kept short. In some cases Input Prompt can be even used to replace the label on text fields.
Input Prompt shouldn’t look like a default answer, because users will take it as such and skip filling in the text field. Common way to separate Input Prompt from a default answer is to make it gray. Also, the text in the Input Prompt shouldn’t be a possibly valid input. So, if you are asking for a destination of travel, don’t use “Paris” as Input Prompt, but use “city” instead.
Well-designed Input Prompt should disappear when the text field gets selected or when the user starts typing, and appear again if the user leaves the field without typing anything.
Example Images (6 examples)
Job searchSource: http://www.theladders.com/
Offering two possible keywords and separating them with “or”-word helps people understand that the text inside the input box is help text and not a default value.
Input Prompt in a comment boxSource: http://flickr.com/
Task managementSource: http://rememberthemilk.com/
As the help text is inside the text box, there is more space for the input – the name of the task.
Create a groupSource: http://posterous.com/
Status update boxSource: http://facebook.com/
Sign up formSource: http://www.tumblr.com/
Here the input prompt is shown also on focus. The prompt disappears when the user starts typing.