Floating Label

Floating Label works with modern HTML5 forms that support the placeholder attribute.

It works by taking a placeholder's text and slowly animating it above the field itself whenever the user focuses the cursor inside the form.

If the user enters text in the field the placeholder will remain above just like a classic label, and if the user leaves the input box without entering any text or deletes previous text, the placeholder is animated back at its normal position.

Everything is done via CSS3 animations, with absolutely no JavaScript involved.

A demo page is included with the Floating Label package.

Requirements:

• CSS 3 enabled browser