- See more at: http://nannodesign.blogspot.com/2013/05/how-to-redirect-blogspotin-to.html#sthash.D5IDJWLk.dpuf

Tuesday, January 3, 2012

Placeholder: An Important Attribute Among HTML5 Attributes

With the update in the version of HTML, i.e., the introduction of HTML5, the application development on website is now very easy. The new feature of HTML5 is input and text area fields. The example of it is Safari’s search box, ‘placeholder’, which adds the default text in text area, if it is empty. Previously, the developers use JavaScript to inject some placeholder text in an input field. JavaScript was not easily accessible, hence the injecting process was difficult. But, with the coming of HTML5, you can now easily use placeholder attributes to add text in the input box. Placeholder attributes work with following input:
  • Text
  • Search
  • URL
  • Telephone
  • Email
  • Password

Firefox 3.7+ and Chrome/Safari 4.0+ support placeholder text. Opera and Internet Explorer don’t support placeholder attributes. The empty text box is filled with placeholder text and it get disappear when not focused.
Placeholder text also provides the benefit of adding watermark to the text. Refer the below mentioned coding:
<input type="text" placeholder="Type here" />
<input type="submit" />

How to style placeholder color property
Placeholder is being manufactured and styled by vendor. The change in its style is difficult, but one can change the color of property to have normal color between browsers. Below mentioned code can help you in changing the color property of placeholder in HTML5:
::-webkit-input-placeholder { color:#999; }
:-moz-placeholder { color:#999; }
:-ms-input-placeholder { color:#999; }
.placeholder { color:#999; }

jQuery Placeholder Text
All browser support placeholder text except, Opera and Internet Explorer.So, if you want to check whether your browser supports placeholder, Modernizr can be a big help. And when you find that placeholder is not support by your browser, you can take help of jQuery. It stores all the variable that the placeholder attributes requires. And, if the input value is empty, it will add placeholder class to the input field and display placeholder text.
So, if you want this on your site, all you have to do is to download jQuery and Modernizr and then paste following codes in your HTML page:
<script src="jquery.js"></script>
<script src="modernizr.js"></script>
$('[placeholder]').focus(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
}).blur(function() {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
$('[placeholder]').parents('form').submit(function() {
$(this).find('[placeholder]').each(function() {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
If you don’t want extra styling to your search input field, add the following CSS codes:
input[type=search] {
-webkit-appearance: none;
input[type="search"]::-webkit-search-cancel-button {
display: none;

This is how jQuery help in placeholder text.
How to use placeholder links in live sites
The website navigation lists indicate the user which page of the site they are referring.It is done with the help of ‘you are here’ indicator. This navigation process takes lot of time. But, with placeholder the website developer can use the navigation as per their preference, just by deleting href attribute from the appropriate link.The link is not clickable which help the customers in not getting confused.
Fallback option to older version
If you want to provide fallback option to the older version of your site with the help of placeholder, you can copy-paste the following code in your text box:
if (!elementSupportsAttribute('input', 'placeholder')) {
// Fallback for browsers that don't support HTML5 placeholder attribute
.data("originalText", $("#textbox").text())
.css("color", "#999")
.focus(function() {
var $el = $(this);
if (this.value == $el.data("originalText")) {
this.value = "";
.blur(function() {
if (this.value == "") {
this.value = $(this).data("originalText");
} else {
// Browser does support HTML5 placeholder attribute, so use it.
.attr("placeholder", $("#textbox").text())

MarkupBox.com is a specialized PSD to HTML Conversion Company, backed with years of experience and diligent professionals.MarkupBox offers PSD to CSS, PSD to HTML5 and software implementation services like PSD to Joomla, PSD to Magento , PSD to WordPress,PSD to Drupal, PSD to Email and much more.


Post a Comment

Design by Wordpress Theme | Bloggerized by Free Blogger Templates