Fancy form input hints with legal markup

Update

Jason has updated his excellent hint script. I seriously recommended it. I modified the example to use his one.

It is quite common these days to use JavaScript to enhance text input fields in HTML forms. One popular technique is to display a helpful text inside the input box before it gains focus and back on blur if nothing has been typed. Something like the What are you doing at the moment? box on Facebook. As I was searching for examples on how this is commonly implemented, I was surprised to find only solutions that relied on illegal element attributes such as hint or placeholder to store the hint text.

Below is an example of invalid markup from a typical solution. Note that I am omitting the usual attributes such as id and name since they are not relevant here. Also note that there is no scripting applied to the example so there is no way to actually see the hint text (with the exception of using view source or Firebug.

Source

<label>Departure</label>
<input hint="dd.mm.yyyy" />

Output

Departure

This certainly makes the field more accessible for those who have Javascript turned on. But it otherwise useless and I am not sure how a screen reader will interpreted this. But it is nothing new to display an example hint next to an input field to aid the user. Here is how I used to do this:

Source

<label>Departure</label>
<input />
<em>dd.mm.yyyy</em>

Output

Departure dd.mm.yyyy

Actually there are more specific HTML elements for this purpose. I found the <kbd/> element to be just what I needed:

Source

<label>Departure</label>
<input />
<kbd>dd.mm.yyyy</kbd>

Output

Departure dd.mm.yyyy

I admit that the default styling is not that pretty but that is easy enough to fix with little CSS. It is also nice to use a little lighter colour on the hint than the label/input text. I will leave that to the professionals.

kbd { font-style : italic; }

I am pretty found of this last example and it is easy to use the markup to implement the same popular focus/blur hint functionality. After finding a nice jQuery input-hint plugin that works on the hint attribute and modifying it a little, I came up with a simple solution that degrades nicely. The plugin accepts a selector to find the element that is to provide the hint text. In the case of using kbd for the hint, the selector would be "+kbd".

Demo

Departure dd.mm.yyyy

Code

$(function(){
    $('#demo input').inputHint({using: '+ kbd'});
});