Form input labels with (HTML5) placeholder attributes

Update 16/12/2010

I used this jQuery placeholder plugin to do the job today and it worked nicely.

The new HTML5 specification introduces the form input placeholder attribute, which allows us to define a hint to help users fill out input fields. If you’re using a WebKit-based browser right now you should find working examples of the new input placeholder in use on this page.

Working with form elements, especially labels, can present a dilemma for many…

In the past scripts such as Joe Sak’s auto-fill/auto-clear jQuery function provided an unobtrusive client-side JavaScript solution. As Joe courteously points out this functionality is now obsolete. We now have the option to replace traditional labels with input placeholders. There are a few pros and cons to using input placeholders, as well as a few other points to consider, which I touch on below.

Correct form input label positioning

Working with form elements especially labels has been, and continues to be, a dilemma for many, including myself. There are numerous design principles to consider whilst striving to offer a healthy form interaction experience for users. Luke Wroblewski – formerly Chief Design Architect at Yahoo! – has been conducting exceptional research work on user interfaces, notably form interaction, for the best part of a decade. He highlights that using top-aligned form label elements – although good for scanability, localization, and label-input association in contrast to left and right-aligned labels – has the downside of requiring more vertical space, which increases form completion time (and page length).

A bonus by-product of using left and right-aligned form input labels, as well as placeholder labels in HTML5, over top-aligned labels, is that we’re able to free-up more space in the interface to show important user notifications, such as validation prompts and flags.

At present you’ll only get HTML5 placeholder support from the latest WebKit browsers.

Pros and cons of form input label positioning
Handy label placement reference courtesy of ‘Best Practices for Web Form Design‘ (3.9MB, .pdf) by Luke Wroblewski.
Label position Usage Advantages Disadvantages
Top-aligned
  • Use when the data collected is familiar
  • Minimize time to completion
  • Require more vertical space
  • Spacing or contrast is vital to enable efficient scanning
  • Flexible for localization and complex inputs
  1. Rapid processing
  2. Adjacent label and corresponding input field
  1. Increased vertical space
Right-aligned
  • Clear association between label and field
  • Requires less vertical space
  • More difficult to scan labels due to left rag
  • Fast completion times
  1. Adjacent label and corresponding input field
  2. Reduced vertical space
  1. Reduced readability
Left-aligned
  • When data required is unfamiliar
  • Enables label scanning
  • Less clear association between label and field
  • Requires less vertical space
  • Changing label length may impair layout
  1. Easy to scan labels
  2. Reduced vertical space
  1. Adjacency of label and corresponding input field

Obviously there are labels to suit every occasion, but it can be time consuming and resource-intensive to consider suitable options and decide on what’s best for users – something the placeholder attribute affords to appease to some extent.

Cross-browser support – no problem!

At present you’ll only get HTML5 placeholder support from the latest WebKit browsers (Safari and Google Chrome), which means you’ll have to include a standard label element fall-back – doing this should be second nature in any case. However, with the use of Moderizr‘s feature detection we can check the extent to which each browser supports the new HTML5 input attribute and apply placeholder functionality only if it’s supported.

The following script replaces traditional input labels for placeholder attributes:

// Replace all form text input labels with (HTML5) placeholder attributes
if (Modernizr.input.placeholder) {
$('form input[type="text"]').each(function () {
var id = $(this).attr('id');
$(this).parent().find('label').attr('for', id).hide();
var newLabel = $(this).parent().find('label').attr('for', id).text().trim();
$(this).attr('placeholder', newLabel);
});
};

Try it out and let me know how you get on!

1 Response to “Form input labels with (HTML5) placeholder attributes”


  • I’d be interested to know what people’s thoughts are on the inherent recall problem associated with using placeholder attributes in place of complementary input label elements?

    Presently, with a placeholder attribute, users must delete (or cut & paste) input content in order to reveal the placeholder attribute again. This isn’t ideal, and unfortunately some users may not even realise this is possible.

    Thanks,

Leave a Reply

ATTENTION: Feel free to use HTML - all the important tags should work. Please wrap your scripts in <code>...</code> - thanks!