A Look into: HTML5 Placeholder Attribute
One of my favorite new pieces in HTML5 is the ability to add Placeholder Text easily. The placeholder text is the grey text that you find in an input field that is used to give a hint to the users on what input is expected in that field. Once users start typing in the input
field, this text will disappear.
In the old days, we commonly do this with JavaScript, as follows;
<input type="text" value="Placeholder text" onfocus="if(this.value=='Placeholder text')this.value='';" onblur="if(this.value=='')this.value='Placeholder text';">
There is nothing wrong with this practice, but it is easier on HTML5.
HTML5 introduced a new attribute with a logical name; placeholder
. Here is an example:
<input type="text" placeholder="Placeholder Text">
If we view it on the browsers, the input should now have the grey text, as seen below;
A few things that should be noted: according to the specification, the placeholder
attribute should not be used as an alternative to a label
and it is also suggested that this attribute should only be applied to input
types that require text, e.g. text
, password
, search
, email
, textarea
and tel
.
Adding placeholder
to the input
types: radio
and checkbox
will not make any difference.
Further Reading: Common Input Element Attribute
Placeholder & CSS
Furthermore, styling the placeholder text through CSS is also possible, but at the time of this writing is still limited to only Firefox and Webkit browsers.
The following example shows how we change the placeholder text to green both in Webkit and Firefox;
input::-webkit-input-placeholder { color: green; } input:-moz-placeholder { color: green; }
Just to remember though, the ::-webkit-input-placeholder
and :-moz-placeholder
will only affect the text and cannot be written in parallel.
input::-webkit-input-placeholder, input:-moz-placeholder { color: green; }
This piece of code won’t work.
Attribute Selector
CSS3 also came to support this attribute by introducing the [placeholder]
attribute selector;
input[placeholder] { border: 1px solid green; }
In the example above, we select every input
that has the placeholder
attribute and change the border to green.
Browser Compatibility
This new HTML5 feature unsurprisingly is not supported in old browsers and is currently only fully supported in: Firefox 4+, Chrome 4+, Safari 5+, Opera 11.6 and Internet Explorer 10 (which hasn’t been officially released yet).
Placeholder Polyfills
Nevertheless, if we need to display the placeholder in older browsers but still be able to use the placeholder
attribute, we can use Polyfills. There are a lot of Placeholder Polyfills out there but in this example we are going to use the PlaceMe.js;
<script src="jquery.js" type="text/javascript"></script> <script src="placeme.js" type="text/javascript"></script>
The PlaceMe.js, as you can see from the code snippet above, is dependent on jQuery. Now, if we view it in, for example, Internet Explorer 9 all the input should now display the placeholder text.
Final Thought
The HTML5 Placeholder attribute certainly makes adding placeholder text easier. Now it is up to us, web developers and designers, to choose which method to use: JavaScript or HTML5.
If you consider that using Polyfills and jQuery to support old browsers is redundant, then JavaScript is apparently more suited for the job. But if you can peacefully ignore the old browsers then using HTML5 Placeholder is probably a better way.
Related posts:
- HTML5 Tutorial: Login Page with HTML5 Forms
- A Look Into HTML5 Forms Input Types: Date, Color and Range
- HTML5: How to Use <DETAILS> and <SUMMARY> Tags
- CSS3 Attribute Selector: Targeting the File Type
via hongkiat.com http://www.hongkiat.com/blog/html5-placeholder/