Submit your widget

jQuery FormLabels Plugin

Created 9 years ago   Views 19799   downloads 4023    Author Andrei Zharau.
jQuery FormLabels Plugin
View DemoDownload 13.0 KB
287
Share |

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

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”