It should be a short hint (in you example "Type your username") rather than an example data (ChuckNorris).
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 </code> attribute is no longer considered appropriate or useful for these situations. The updated advice is (from the current draft):</p><br/><blockquote><br/><p>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.<br/>Use of the <code>placeholder</code> attribute as a replacement for a <code>label</code> 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 <code>label</code> is shown at all times, the short hint given in the <code>placeholder</code> attribute is only shown before the user enters a value. Furthermore, <code>placeholder</code> 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.</p><br/></blockquote><br/><p>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!)</p><br/></div>
<div style='clear: both;'></div>
</div>
<div class='post-footer'>
<div class='post-footer-line post-footer-line-1'>
<span class='post-author vcard'>
</span>
<span class='post-timestamp'>
-
<meta content='https://uxwrgfdfin.blogspot.com/2015/10/forms-placeholder-field-label-or-sample.html' itemprop='url'/>
<a class='timestamp-link' href='https://uxwrgfdfin.blogspot.com/2015/10/forms-placeholder-field-label-or-sample.html?m=1' rel='bookmark' title='permanent link'><abbr class='published' itemprop='datePublished' title='2015-10-17T06:18:00-07:00'>October 17, 2015</abbr></a>
</span>
<span class='post-comment-link'>
</span>
</div>
<div class='post-footer-line post-footer-line-2'>
<div class='mobile-link-button goog-inline-block' id='mobile-share-button'>
<a href='javascript:void(0);'>Share</a>
</div>
</div>
</div>
</div>
<div class='comments' id='comments'>
<a name='comments'></a>
<h4>No comments:</h4>
<div id='Blog1_comments-block-wrapper'>
<dl class='avatar-comment-indent' id='comments-block'>
</dl>
</div>
<p class='comment-footer'>
<div class='comment-form'>
<a name='comment-form'></a>
<h4 id='comment-post-message'>
<a href='javascript:void(0)' id='Blog1_comment-editor-toggle-link'>Post a Comment</a></h4>
<p>
</p>
<a href='https://www.blogger.com/comment/frame/5284257653341158026?po=387818160477959617&hl=en&saa=85391&origin=https://uxwrgfdfin.blogspot.com&m=1' id='comment-editor-src'></a>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410px' id='comment-editor' name='comment-editor' src='' style='display: none' width='100%'></iframe>
<script src='https://www.blogger.com/static/v1/jsbin/2830521187-comment_from_post_iframe.js' type='text/javascript'></script>
<script type='text/javascript'>
BLOG_CMT_createIframe('https://www.blogger.com/rpc_relay.html');
</script>
</div>
</p>
</div>
</div>
</div>
</div>
</div>
<div class='blog-pager' id='blog-pager'>
<div class='mobile-link-button' id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' href='https://uxwrgfdfin.blogspot.com/2015/10/transparency-using-gimp-can-you-color.html?m=1' id='Blog1_blog-pager-newer-link' title='Newer Post'>‹</a>
</div>
<div class='mobile-link-button' id='blog-pager-older-link'>
<a class='blog-pager-older-link' href='https://uxwrgfdfin.blogspot.com/2015/10/selecting-colors-suitable-for-color.html?m=1' id='Blog1_blog-pager-older-link' title='Older Post'>›</a>
</div>
<div class='mobile-link-button' id='blog-pager-home-link'>
<a class='home-link' href='https://uxwrgfdfin.blogspot.com/?m=1'>Home</a>
</div>
<div class='mobile-desktop-link'>
<a class='home-link' href='https://uxwrgfdfin.blogspot.com/2015/10/forms-placeholder-field-label-or-sample.html?m=0'>View web version</a>
</div>
</div>
<div class='clear'></div>
</div>
</div>
</div>
</div>
<div class='column-left-outer'>
<div class='column-left-inner'>
<aside>
</aside>
</div>
</div>
<div class='column-right-outer'>
<div class='column-right-inner'>
<aside>
</aside>
</div>
</div>
</div>
<div style='clear: both'></div>
<!-- columns -->
</div>
<!-- main -->
</div>
</div>
<div class='main-cap-bottom cap-bottom'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
</div>
<footer>
<div class='footer-outer'>
<div class='footer-cap-top cap-top'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
<div class='fauxborder-left footer-fauxborder-left'>
<div class='fauxborder-right footer-fauxborder-right'></div>
<div class='region-inner footer-inner'>
<div class='foot section' id='footer-1'>
</div>
<!-- outside of the include in order to lock Attribution widget -->
<div class='foot section' id='footer-3' name='Footer'><div class='widget Attribution' data-version='1' id='Attribution1'>
<div class='widget-content' style='text-align: center;'>
Powered by <a href='https://www.blogger.com' target='_blank'>Blogger</a>.
</div>
<div class='clear'></div>
</div></div>
</div>
</div>
<div class='footer-cap-bottom cap-bottom'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
</div>
</footer>
<!-- content -->
</div>
</div>
<div class='content-cap-bottom cap-bottom'>
<div class='cap-left'></div>
<div class='cap-right'></div>
</div>
</div>
</div>
<script type='text/javascript'>
window.setTimeout(function() {
document.body.className = document.body.className.replace('loading', '');
}, 10);
</script>
<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/344097953-widgets.js"></script>
<script type='text/javascript'>
var BLOG_BASE_IMAGE_URL = 'https://resources.blogblog.com/img';var BLOG_LANG_DIR = 'ltr';window['__wavt'] = 'APlU3lwvBT-9AUDFKgfwrAH3vCyB:1775396075953';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d5284257653341158026','//uxwrgfdfin.blogspot.com/2015/10/forms-placeholder-field-label-or-sample.html?m\x3d1','5284257653341158026');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '5284257653341158026', 'title': 'Blog', 'url': 'https://uxwrgfdfin.blogspot.com/2015/10/forms-placeholder-field-label-or-sample.html?m\x3d1', 'canonicalUrl': 'https://uxwrgfdfin.blogspot.com/2015/10/forms-placeholder-field-label-or-sample.html', 'homepageUrl': 'https://uxwrgfdfin.blogspot.com/?m\x3d1', 'searchUrl': 'https://uxwrgfdfin.blogspot.com/search', 'canonicalHomepageUrl': 'https://uxwrgfdfin.blogspot.com/', 'blogspotFaviconUrl': 'https://uxwrgfdfin.blogspot.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': false, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': '', 'encoding': 'UTF-8', 'locale': 'en', 'localeUnderscoreDelimited': 'en', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': true, 'isMobileRequest': true, 'mobileClass': ' mobile', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Blog - Atom\x22 href\x3d\x22https://uxwrgfdfin.blogspot.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22Blog - RSS\x22 href\x3d\x22https://uxwrgfdfin.blogspot.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Blog - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/5284257653341158026/posts/default\x22 /\x3e\n\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Blog - Atom\x22 href\x3d\x22https://uxwrgfdfin.blogspot.com/feeds/387818160477959617/comments/default\x22 /\x3e\n', 'meTag': '', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': true, 'adsenseAutoAds': false, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/16d2a080d6cf52d7', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Get link', 'key': 'link', 'shareMessage': 'Get link', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Share to Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'X', 'key': 'twitter', 'shareMessage': 'Share to X', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Share to Pinterest', 'target': 'pinterest'}, {'name': 'Email', 'key': 'email', 'shareMessage': 'Email', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27en\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': false, 'jumpLinkMessage': 'Read more', 'pageType': 'item', 'postId': '387818160477959617', 'pageName': 'forms - Placeholder : field label or sample data?', 'pageTitle': 'Blog: forms - Placeholder : field label or sample data?'}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Edit', 'linkCopiedToClipboard': 'Link copied to clipboard!', 'ok': 'Ok', 'postLink': 'Post Link'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': 'Custom', 'isResponsive': false, 'isAlternateRendering': true, 'isCustom': true}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': true, 'title': 'forms - Placeholder : field label or sample data?', 'description': 'I am designing a generic form. Every input has a label positioned right above it. My question is about using input fields placeholder : Shou...', 'url': 'https://uxwrgfdfin.blogspot.com/2015/10/forms-placeholder-field-label-or-sample.html?m\x3d1', 'type': 'item', 'isSingleItem': true, 'isMultipleItems': false, 'isError': false, 'isPage': false, 'isPost': true, 'isHomepage': false, 'isArchive': false, 'isLabelSearch': false, 'postId': 387818160477959617}}]);
_WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'header', document.getElementById('Header1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'mobile': true}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_FeaturedPostView', new _WidgetInfo('FeaturedPost1', 'main', document.getElementById('FeaturedPost1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PopularPostsView', new _WidgetInfo('PopularPosts1', 'main', document.getElementById('PopularPosts1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogSearchView', new _WidgetInfo('BlogSearch1', 'sidebar-right-1', document.getElementById('BlogSearch1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogArchiveView', new _WidgetInfo('BlogArchive1', 'sidebar-right-1', document.getElementById('BlogArchive1'), {'languageDirection': 'ltr', 'loadingMessage': 'Loading\x26hellip;'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_AttributionView', new _WidgetInfo('Attribution1', 'footer-3', document.getElementById('Attribution1'), {}, 'displayModeFull'));
</script>
</body>
</html>