So I set out to add some placeholder text for login fields in my CakePHP project. First I tried the default attribute, and then started implementing some Javascript to clear the text from the field on focus.

Then I remembered the awesomeness that is HTML5 has introduced the placeholder attribute to the input tag. Placeholder text appears in the input field much like default text would – the difference being that placeholder text disappears when you start typing in the field, whilst default text would have to be deleted.

So:

<input name="fname" type="text" placeholder="First name" />

produces

And because HTML5 is so cool, if you delete the text from the input, the placeholder text re-appears.