jQuery FormLabels Plugin |

Home FormjQuery FormLabels Plugin

jQuery FormLabels Plugin

13 years ago Views

13779

2431

Andrei Zharau.

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 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 position 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

useage

This plugin 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 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>

Options

Key	Default	Description
excludeElts	none	Elements to be excluded from global labels creation on a page
refreshOnResize	false	Whether or not refresh labels on window ‘resize’ event. Useful if you use ‘body’ as a parent container for your labels
safemode	false	Enable legacy safe mode without any DOM modifications (very limited functionality; see the plugin’s code for details)
labelParent	‘form’	Specifies a block that will store the form labels. Can be either any element on the page or ‘form’ – the closest form element of targeted input
semantic	true	Although it’s not recommended to turn off this function, sometimes it can be useful. Setting it to false prevents inserting before input element and appends it at the end of a form

Method

Method	Example	Description
refreshLabels()	$.fn.formLabels.refreshLabels()	This method refreshes label’s position relatively to its corresponding creator – input element. Useful when you made changes in your form and want to re-position labels because positions of inputs have been changed.

Dependencies

The plugin requires jQuery 1.4 and jQueryUI 1.8

FAQ

Q: Would be nice if there could be a hide/show option for your label… I have a sliding div & experience isn’t very nice w/ that
A: Each label is a span with class .fLabel. Use $(“span.fLabel”).hide() to hide all or $($(input).data(“spanID”)).hide() – hides particular label where input is a selector for your input element, e.g. $($(“#password”).data(“spanID”)).hide() hides a label that corresponds to input with id=”password”