Skip to content

nitinshirsat/labels

 
 

Repository files navigation

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

About

Labels inside form fields (jQuery plugin)

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published