HTML5 Placeholder Attribute

A guide to using the attribute, and support it for older browsers.


November 8th, 2011

Placeholder

Placeholder text is a short example or hint text that is shown in a form field when the field is unfocused and has no input from the user.




This could be considered a poor example, as label elements should be used for maximum accessibility. Not showing labels can make forms look less complex, increasing usability, but hurt accessibility. The HTML5 spec instructs that the placeholder attribute should not be used as an alternative to a label.

While the adding & removing of placeholder text on field focus has long been accomplished through JavaScript, there is now a placeholder attribute in the HTML5 working draft. Most modern browsers support the placeholder attribute and will automatically add/replace the placeholder text. They will also automatically exclude the placeholder from being sent when the form is submitted. However, versions of Internet Explorer prior to IE10 do not support the attribute.

<input type='text' name='email' placeholder='Email Address'>

Supporting Older Browsers

// A jQuery based placeholder polyfill
$(document).ready(function(){
  function add() {
    if($(this).val() === ''){
      $(this).val($(this).attr('placeholder')).addClass('placeholder');
    }
  }

  function remove() {
    if($(this).val() === $(this).attr('placeholder')){
      $(this).val('').removeClass('placeholder');
    }
  }

  // Create a dummy element for feature detection
  if (!('placeholder' in $('<input>')[0])) {

    // Select the elements that have a placeholder attribute
    $('input[placeholder], textarea[placeholder]').blur(add).focus(remove).each(add);

    // Remove the placeholder text before the form is submitted
    $('form').submit(function(){
      $(this).find('input[placeholder], textarea[placeholder]').each(remove);
    });
  }
});

To enable styling, this script adds a class of 'placeholder' while the placeholder text is being displayed.

Styling The Placeholder

Since placeholder has yet to be standardized, styles are applied through vendor-specific prefixes. Even though Opera 11 supports the placeholder attribute, it does not offer any way to style it at this time. It's a good idea to go ahead and specify at least the color property to normalize the color between browsers. Otherwise, a default style will be provided which will vary from browser to browser.

::-webkit-input-placeholder { color:#999; }
::-moz-placeholder { color:#999; } /* FF 19+ */
:-moz-placeholder { color:#999; } /* FF 18- */
:-ms-input-placeholder { color:#999; }
.placeholder { color:#999; } /* for the polyfill */

John Catterfeld compiled a nifty list of CSS properties can be applied to placeholders.


Hey,

Follow me on Twitter and Github, that's where I'm most active these days. I welcome email (), but I'm afraid I no longer have time to answer personal requests for help regarding my plugins or posts. Thanks!