Liberty Concepts - Creators of New Media Campaigns

jQuery FormLabels Plugin

• Development

Overview

The idea of using captions on form input boxes is not new, but all previous methods of providing this functionality have a few disadvantages. The jQuery FormLabels Plugin is a result of working with hundreds of different clients, sites, and especially forms. Every form is different, so building a uniform label generator was not an easy task. The plugin has a few advantages over other plugins and "tricks" with similar functionality:

• Form label has almost the same styling as its "parent" input element
• Labels on password input boxes look like text, not asterisks
• Accurate label's positioning regardless of size and other properties of input box
• Simplicity: no need to change a form's markup or CSS in order to get the labels work
• Multiple options and methods including safemode option for legacy browsers
• Animation
• Cross-Browser support

Usage

This plugin is intended to work with the following elements:

• input[type='text']
• input[type='email']
• input[type='password']
• textarea

To generate a label for an input element add a title attribute into the HTML tag:

   <input type="email" name="email" title="Email Address" />
   <input type="password" name="password" title="Password" />
   <input type="text" name="password" title="Secret Word" />
   <textarea name="comments" title="Comments...">

You should include plugin initialization as well:

<script>
   $(function(){
         $.fn.formLabels();
   });
</script>

See the demo page for more usage details.

Options

Method

Dependencies

The plugin requires jQuery 1.4 and jQueryUI 1.8

Changelog

1.0RC2

• the plugin supports a new refresh method
• new options: safemode and labelParent
• slightly updated performance

1.0RC1

• Basic functionality