It should be a short hint (in you example "
Type your username") rather than an example data (
The reason for this is that Placeholders have the potential to be mistaken for pre-completed fields, especially at a glance. If you have placeholders showing sample data then that increases the possibility of people thinking the field has already been filled in.
The current W3 Site gives the following advice:
placeholder = string
Represents a short hint (a word or short phrase) intended to aid the user with data entry.
Note: It does go on to say:
A hint could be a sample value or a brief description of the expected format. For a longer hint or other advisory text, the title attribute is more appropriate.
However this is incorrect and is being updated in a future version of the W3 spec, partly because the
<title> attribute is no longer considered appropriate or useful for these situations. The updated advice is (from the current draft):
The placeholder attribute should not be used as a replacement for a label. For a longer hint or other advisory text, place the text next to the control.
Use of the
placeholder attribute as a replacement for a
label can reduce the accessibility and usability of the control for a range of users including older users and users with cognitive, mobility, fine motor skill or vision impairments. While the hint given by the control's
label is shown at all times, the short hint given in the
placeholder attribute is only shown before the user enters a value. Furthermore,
placeholder text may be mistaken for a pre-filled value, and as commonly implemented the default color of the placeholder text provides insufficient contrast and the lack of a separate visible label reduces the size of the hit region available for setting focus on the control.
So, if you're going to be using Placeholders (and I'd probably think carefully if you are going to) then make sure it's a hint and not an example. But make sure you surround the form with the correct markup too (correct label and descriptive text if necessary) and style the placeholder so that it is clearly a placeholder and not a piece of data (but still with enough contrast to be accessible - which overall is no mean feat!)