The Floated Label Pattern using CSS only.

The Example

Problems with this:

• The label has to appear after the input. I'm using CSS trickery to get it into place.
• It relies on the pattern attribute and the :valid pseudo class, which means that they can't be used for other things like validating email addresses.

See Brad Frost's post about the Floated Label Pattern