Developed by William Duffy

jLabel

Download jLabel v1.3 now:
production  |  development  |  contribute
jLabel is a jQuery plugin that formats text input fields with unobtrusive labels featuring interactive suggestions. This allows input fields to be labelled clearly and presented with minimal interface obstruction.

Examples of jLabel in action

Pre Labelled

Pre labelled is the suggested method for implementing jLabel. By creating the text field's label in your html markup there are no usability restrictions on javascript disabled browsers. This enables jLabel to apply progressive enhancement on your text fields. To see this in action disable javascript in your browser.

            
<label for="prelabel_example1">First Name</label>
<input type="text" id="prelabel_example1" />

<label for="prelabel_example2">Last Name</label>
<input type="text" id="prelabel_example2" />

Post Labelled

In the instance that jLabel cannot find a related label in your markup it will create a new one. This label's text is based on the value in its related text field title attribute. jLabel will then insert this into the DOM directly before the text field.

            
<input type="text" id="postlabel_example1" title="First Name" />
<input type="text" id="postlabel_example2" title="Last Name" />

Customised Options

jLabel allows customisation of its animation, opacity and label positions.
These can be specified either globally or per selector.

            
$.fn.jLabel.defaults.speed = 1000;
$.fn.jLabel.defaults.opacity = 0.1;

or...

$(':text').jLabel({ speed : 1000, opacity : 0.1 });

Getting started with jLabel is easy

First, you need to ensure that you have jQuery included in your page. If you have never used jQuery before I would recommend reading this quick introduction.

To jLabel every text field on the page use the following syntax:
$(':text').jLabel();
If you wish to jLabel a specific text field you can use jQuery's ID selector:
$('#your_element_id').jLabel();
Or, to jLabel a group of text fields you can use jQuery's class selector:
$('.your_class').jLabel();
Of course, you can also use any jQuery selector to jLabel your text fields.

Why use jLabel?

Listed are a few of the nice features that help set jLabel apart from similar plugins:
Do you like jLabel? Why not follow me on Twitter for updates and future plugins.