jQuery FormLabels Plugin
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 plugins and “tricks” with similar functionality:
- Form label has
almostthe 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
Usage
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>
See the demo page for more usage details.
Options
| Key | Default | Description |
|---|---|---|
| excludeElts | none | Elements to be excluded from global labels creation on a page [demo] |
| refreshOnResize | false | Whether or not refresh labels on window ‘resize’ event. Useful if you use ‘body’ as a parent container for your labels [demo] |
| safemode | false | Enable legacy safe mode without any DOM modifications (very limited functionality; see the plugin’s code for details) [demo] |
| 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 [demo] |
| 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 [demo] |
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. [demo] |
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”
Changelog
1.0
- depending on which element is a parent element, script creates formLabels either as spans or labels
- new option ‘semantic’. If true, then plugin renders label tag before input box (works only if labelParent:’form’) (suggested by Alex Hall)
- ‘labelParent’ option supports any element on the page (suggested by Ferry Mulyono), but labelParent: ‘form’ puts labels into closest form. Default value has been changed to ‘form’, which I think more reasonable than body tag
- changed logic for label’s background detection in Firefox
- fixed problem with blur event (formLabel did not disappear on autocomplete blur)
- new demo
1.0RC2
- plugin supports a new refresh method
- new options: safemode and labelParent
- fixed probmlems with input events in IE
- green hue opacity bug in FF fixed (thanks to Ionut Staicu)
1.0RC1
- Basic functionality
Tweet This
Digg This
Save to delicious
Stumble it
RSS FeedLeave a Reply
0 Trackbacks
Trackback URL for this post:
http://o2v.net/blog/jquery-formlabels-plugin/trackback
21 Pings
- jQuery FormLabels Plugin | Andrei Zharau :: Personal Site | [codepotato]2010-06-20 09:40:01
[...] FormLabels Plugin | Andrei Zharau :: Personal Site Posted June 20th, 2010 in Blog by Gareth http://o2v.net/blog/jquery-formlabels-plugin Very nice form label [...]
- jQuery FormLabels Plugin | Andrei Zharau :: Personal Site « Netcrema – creme de la social news via digg + delicious + stumpleupon + reddit2010-06-20 10:05:32
[...] jQuery FormLabels Plugin | Andrei Zharau :: Personal Siteo2v.net [...]
- jQuery FormLabels Plugin | Andrei Zharau :: Personal Site : Popular Links : eConsultant2010-06-20 11:09:21
[...] more: jQuery FormLabels Plugin | Andrei Zharau :: Personal Site 18 June 2010 | Uncategorized | Trackback | del.icio.us | Stumble it! | View Count : 0 Next Post [...]
- jQuery FormLabels Plugin by Andrei Zharau : Speckyboy Design Magazine2010-06-20 14:40:30
[...] Direct Link [...]
- Wayne State Web Communications Blog » Blog Archive » [Friday Links] The Father’s Day Edition2010-06-21 08:22:37
[...] jQuery FormLabels Plugin | Andrei Zharau [...]
- links for 2010-06-21 « Mandarine2010-06-21 23:07:27
[...] jQuery FormLabels Plugin (tags: webdev jquery form) [...]
- Fresh jQuery Resources « ClickLogin Web Design2010-06-22 06:23:15
[...] jQuery FormLabels Plugin [...]
- Best jQuery plugins – June 2010 « qeqnes | Designing. jQuery, Ajax, PHP, MySQL and Templates2010-06-24 05:41:29
[...] Try out a demo [...]
- jQuery FormLabels 1.0 Released | Andrei Zharau2010-06-25 21:55:19
[...] previous article about jQuery FormLabels 1.0RC2 was very popular (>2000 visits daily – more than on any [...]
- Qink | FormLabels - A jQuery for using captions on form inputs2010-06-26 09:44:54
[...] 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 [...]
- Etiquetas para campos de formularios con javascript :digilabs.com.ar2010-06-28 04:22:24
[...] más información en : http://o2v.net/blog/jquery-formlabels-plugin [...]
- Best jQuery plugins – June 2010 | search engine optimization - bloghosting and sale at 123-sale.com2010-06-28 21:27:06
[...] Try out a demo [...]
- Resurse pentru programatori şi web designeri #3 | MARGEO2010-07-15 07:18:14
[...] jQuery FormLabels Plugin [...]
- jQuery Resources | with tool2010-07-15 18:13:27
[...] jQuery Form Labels Plugin to build form input boxes [...]
Hey man. You should add a background-color to pseudo label span.
FF have a bug (?) and will display text in an ugly way: http://screencast.com/t/ZWUzNmNh ;)
Thanks for this catch. I just uploaded a new version. I haven't saw this problem on all computers in our office, except one. Can you check if it has been fixed for you too?
aw aw aw so smooth and so cool my friend
thanks a lot for tutor ^^
Yup, better!
The problem was visible on FF 3.6 Win. Dunno on mac.
Pretty neat! What about making use of the HTML5 placeholder attribute (see http://diveintohtml5.org/forms.html#placeholder)?
Something along those lines has already been done by Andrew January (http://www.morethannothing.co.uk/2010/01/placeholder-text-in-html5-a-js-fallback/)
Very slick. Both user friendly and attractive. I'm not sure for production I would use the title attribute to dynamically add a label over hard coding a label in the markup but it's a useful interface idea that could catch on.
Great ! Thank!
But , I have a stupid question...
Why don't use it with your comment box - for exemple ? ;)
Kevin, you raise a good point.
The reason why I don't use the labels on the comments section just because of there is no point of doing that. From my understanding of human-computer interaction - this labels should NOT be used left and right. Check out this (http://www.lukew.com/ff/entry.asp?504) great article by Luke Wroblewski where he is talking about form completion times. Basically, the formLabels plugin is useful when you're need to use design space more efficiently, so you don't have enough room to place the labels. To make my words a little bit clear, check out one of the sites that I've built with formLabels (custom build with pretty much similar functionality; one of the first raw versions): http://www.newenglandssc.org/. See the difference between search field and email sign up fields.
Hi,
Seems pretty nice, but why not using a "label" tag in the markup to keep it more semantic?
Binocle, thank you for your comment. In most cases 'semantic' != 'convenient'. I prefer to use easier way by changing an input's attribute, which seems more logically correct than linking 'label' tag to input tag. As it was mentioned by Alexander Kirk already, it would be nice to use 'placeholder' attribute, which seems even more logically correct than 'title', and I think that future versions of the plugin will be coded with 'placeholder' in mind.
You're missing the point of the label tag, though. It's not just for semantics, it's for screen readers and it allows you to link the label to the input. By this I mean that without the javascript you can still click the label to reference the correct input. All input elements (though I don't put them with submit inputs) should have a label. All your plugin would then need to do is position this label over the input and hide/move/fade the label rather than the title attribute.
I have written this as a YUI plugin:
http://www.devseo.co.uk/examples/funky-forms/
Great work!
I have a suggestion though. It seems that you only allows either 'body' or 'form' on labelParent. I think you should allow free-form selector to accommodate more sophisticated design. I used custom div wrapper for each of my input element and no form at all because the forms are AJAX in nature.
neat plugin. label is screen reader friendly though. it'd be nice if the plugin hides the label and uses its inner text instead.
Hi,
This is really great. I like the fade caption effect and the overall design. It is simple and nice. I am looking forward to see more post from you.
Great job! Keep it up.
Dear Alex,
Thank you for coming by. I always enjoy reading comments from people who either don't understand or don't know at all what they are talking about. I'll divulge a secret to you. Screen Reader DOES speak a title attribute. Moreover, the best screen readers override LABEL attribute :) Don't believe me? Open Windows Narrator and point it to this demo. Multiple sites with this plugin, e.g. http://slcp.ed.gov were tested by different government IT departments for Section 508 compliance and nobody mentioned anything about problems with formlabels and screen readers.
I had a feeling you'd say something like that, which just brings us back to the point of, a). semantics, and b). the working draft of the WCAG accessibility guidelines and this paragraph:
http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-unassociated-labels
and
http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-associate-labels
These both suggest that labels are arbitrary for accessibility purposes. I should know, I built a site that replaced another which was technically illegal because it provided a service that wasn't accessible to all. Had to do so many tests to ensure the new one was accessible, and this cropped up a lot!
Hey Alex,
I went to the site you mentioned:
http://www.devseo.co.uk/examples/funky-forms/
It doesn't work in IE8 in either view -compatibility view or normal.
This plugin is awesome man. Nice job. So easy to install too. I just used this on a site and it's really nice. Bookmarked and Dugg!
@Joe
Hey Joe,
I had originally turned off the 'new form' for all version of IE as there were teething troubles. I've turned it back on now and it should work (ish) for IE8 and possibly 7. I dread to think how IE6 will look though!
Hey
I think you should maybe add the functionality of fetching the labels from tags... Although this might be tricky, it would be nice for xHTML validation I think...
Greetings,
Asmodiel
Hi, and thank you very much for this amazing and beautiful plugin. i used to use http://plugins.jquery.com/project/jq-watermark before and i'm currently trying to use yours...
there is one little details that i'd love to ask you about:
do we really need to download the ui core to use formLabel??? i'm already using jquery-tools wish is about 100kb and don't really feel like haveing another library...!!
Thank you very much in advance for your help
@Reda, Thank you very much for your feedback. You don't need to use the entire library. The plugin uses only position utility that only weights about 3K and it looks like it doesn't require the core. On the jQueryUI download page, click on "Deselect all components", then only check Position, and download the package. Let me know if it works for you without core component.
Hi Andrei, and thank you for your prompt reply ;)
i did use the ui code () to test but i have a positioning problem: http://moroccan-arts.co.uk/index1.php
I'm using Safari on mac but the problem should be the same on windows :(
Thank you so much for your help
Looks like your troubles because of line-height:15px applied for the body tag in general.css on line#1.
Try to remove that property or use $.fn.formLabels({labelParent:'body'}) instead.
I have just removed line-height:15px but nothing changed!!
@Reda, I see that you use uniform plugin and it probably interferences with the formLabels. Can you try first run $("input, textarea, select, button").uniform(); and only then $.fn.formLabels(); So, my plugin will use input position values after Uniform finishes its work. I hope i will help.
=Andrei
Oh yeaaah, it's working perfectly, thank you thank you thank you sooo much :))
however the font-family and font-weight are not working anymore, do you know why??? here is the new url: http://moroccan-arts.co.uk/index.php
uniform is causing me so much conflict. i LOVE it so much but i think i'll have to do my website without it and leave the checkbox & radio on there natural way :(( do you know any good plugins??
do you think that in the future versions formLabels could work without the ui-position library??
Thanks again