Thursday, January 12, 2012

Use HTML5 placeholders, in XForms

When a form is first shown to users, text fields are often empty. So why not use that space, to provide some useful information? For instance, the Yahoo! Registration page leverages this technique:

"First name" or "Last name", in this example, are often referred to as placeholders, and they disappear when you focus on the specific text field. You can get this behavior by implementing it in JavaScript, and in fact this has become quite popular in the last few years. So much so, that a placeholder attribute was been added in HTML5; this way, every web site wouldn't have to re-implement this behavior in JavaScript. This HTML5 feature is now supported by all the major browsers (Chrome, Firefox, Safari, Opera), including Internet Explorer since IE10.

Placeholders are often used:

  • Like a label, as in the above example. HTML5 warns against using placeholders as labels, as the information carried by the label won't be shown if the field isn't empty. So only use placeholders as labels in cases where, even if missing, there is little doubt as to the meaning of the fields. You can tell Orbeon Forms to show a label as a placeholder by setting an appearance="minimal" on the label, as in:

    <xforms:input ref="first-name">
        <xforms:label appearance="minimal">
            First name
  • Like a hint, placing the appearance="minimal" on the hint, as in:

    <xforms:input ref="phone">
        <xforms:label>Phone number</xforms:label>
        <xforms:hint appearance="minimal">
            (555) 555-5555
When using a placeholder in XForms, if users access your form with a browser that:
  • does supports HTML5 placeholders, Orbeon Forms leverages that native feature of the browser;
  • does not support HTML5 placeholders, Orbeon Forms simulates it, with JavaScript.
This way, you as an XForms author don't have to write different code for different browsers, or worry about browser compatibility, and your end users get the same rich user experience, even on browsers that don't support this HTML5 feature.

1 comment: