Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Labels inside form fields (jQuery plugin)

branch: master
README.md

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.

attardi.org/labels

@steadicat

Something went wrong with that request. Please try again.