HTML5 introduced many new features, one of them is the placeholder attribute. What it does is showing text in a field until any value is entered, then hides the text. Very useful to show users example of what to enter in a field. You’ve probably seen this techinque a lot with Javascript, but native HTML5 support is even better.
Markup
<input type="text" name="name" /> |
Try it here:
Custom styling
If you want to style the placeholder, fade it a bit or something. Here is the CSS you should use, for now only support in Webkit and Mozilla browsers
::-webkit-input-placeholder {color: #999;} :-moz-placeholder {color: #999;} |
Legacy browsers
This is a pure HTML5 feature, if you are using older browsers or mobile the placeholder probably wont show.
There is a great jQuery plugin called jQuery-Placeholder
( Credit to Daniel Stocks webcloud.se )
All you need to do is to add this line
$('input[placeholder], textarea[placeholder]').placeholder(); |
Supports: IE 6+ Firefox 3+ Safari 3+ Chrome ✓ Opera ✓ iPhone ✓ Android ✓
