Labels inside form fields (jQuery plugin)
HTML JavaScript CSS
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
site Bring design into this decade and improve CSS May 11, 2014
README.md
index.html Bring design into this decade and improve CSS May 11, 2014
labels.css
labels.js

README.md

DEPRECATED!

Consider using the placeholder attribute instead. It is now supported by most browsers. You can style it with the ::placeholder pseudoelement.

Introduction

This is one of the best ways to place labels inside input fields.

This version works by placing the label in front of the input field, so that the native styling of the control can be preserved. If you prefer, check the "behind" branch for labels behind the input field.

The solution is based on simple HTML markup, some CSS styling, and a jQuery plugin. The license is MIT. Feedback (bugs, suggestions, compatibility reports) on Twitter: @steadicat.

How to use

All you need is labels.js and labels.css, plus jQuery. See index.html for more information.

Rationale

Placing labels inside input fields is a new pattern that, in my user tests, yields better results. This pattern is used consistently, for example, in Facebook and throughout Apple’s products.

This solution has been harshly criticised, as it is said to confuse users who expect to have to select and delete the instruction text. This is indeed often the case. However, better implementations, such as this one, solve this problem, as well as maintaining accessibility and standards-compatibility.

@steadicat