jQuery FormLabels Plugin

Demo Download

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

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

Method

Method Example Description
refreshLabels() var formLabels = $(“#form”).formLabels();
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]
destroy() var formLabels = $(“#form”).formLabels(); formLabels.destroy(); Destroys labels and events created by the plugin
disable() var formLabels = $(“#form”).formLabels();
formLabels.disable();
Temporary disable the plugin: hide the labels and stop responding to interaction events/td>
enable() var formLabels = $(“#form”).formLabels();
formLabels.disable(); formLabels.enable();
Enable the plugin if it has been disabled previously/td>

Dependencies

The plugin requires jQuery 1.9.0 and jQueryUI 1.10.2

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 the input with id=”password”

Changelog

1.1

  • Add support for jQuery 1.9 and jQuery 1.10
  • New methods to destroy, disable, and enable the plugin
  • Performance and code quality improvements

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

Tags: , ,

 
 
 

49 Comments

  1. Ionut Staicu2010-06-18 11:24:54

    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 ;)

     
  2. Andrei Zharau2010-06-18 14:40:57

    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?

     
  3. Beben2010-06-19 05:15:34

    aw aw aw so smooth and so cool my friend
    thanks a lot for tutor ^^

     
  4. Ionut Staicu2010-06-19 06:30:37

    Can you check if it has been fixed for you too?

    Yup, better!

    The problem was visible on FF 3.6 Win. Dunno on mac.

     
  5. Alexander Kirk2010-06-20 12:18:49

    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/)

     
  6. Matt Hinchliffe2010-06-21 03:59:10

    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.

     
  7. kevin2010-06-21 06:36:42

    Great ! Thank!
    But , I have a stupid question...
    Why don't use it with your comment box - for exemple ? ;)

     
  8. Andrei Zharau2010-06-21 14:33:19

    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.

     
  9. binocle2010-06-22 04:16:54

    Hi,
    Seems pretty nice, but why not using a "label" tag in the markup to keep it more semantic?

     
  10. Andrei Zharau2010-06-22 07:40:59

    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.

     
  11. Alex Hall2010-06-23 03:58:00

    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/

     
  12. Ferry Mulyono2010-06-23 04:00:11

    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.

     
  13. jin2010-06-23 04:04:43

    neat plugin. label is screen reader friendly though. it'd be nice if the plugin hides the label and uses its inner text instead.

     
  14. Jimmy Liew2010-06-23 04:08:00

    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.

     
  15. Andrei Zharau2010-06-23 08:00:26

    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.



    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.

     
  16. Alex Hall2010-06-24 10:30:22

    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!

     
  17. Joe2010-06-25 09:46:07

    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.

     
  18. ATL2010-06-25 21:48:20

    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!

     
  19. Alex Hall2010-06-28 03:10:31

    @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!

     
  20. Asmodiel2010-07-04 07:12:37

    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

     
  21. Reda2010-07-16 13:13:22

    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

     
  22. Andrei Zharau2010-07-16 13:41:10

    @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.

     
  23. Reda2010-07-16 15:58:36

    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

     
  24. Andrei Zharau2010-07-16 16:30:50

    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.

     
  25. Reda2010-07-16 17:16:15

    I have just removed line-height:15px but nothing changed!!

     
  26. Andrei Zharau2010-07-16 17:39:27

    @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

     
  27. Reda2010-07-16 18:21:46

    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

     
  28. RiaanWest2010-08-11 12:49:58

    Great work on this wonderful little plugin. Thank you!

     
  29. Reda2010-09-05 22:22:45

    Hey Andrei, how are you?
    i have another little problem that i cant figure out, hope you can help me solve it.
    the labels don't appear on this page http://moroccan-arts.co.uk/test-index.php when you hover "Account". is it because it's in a absolute div??

    Thank's a lot for your help

     
  30. Daniel S2010-09-06 08:40:34

    Thank you very much for that great plugin!

     
  31. Peter Kaiser2011-02-25 05:09:34

    Hi,
    there seems to be a problem when using this plugin in combination with the autocomplete feature of ie8. --> When the input boxes are populated using autocomplete the overlayed label won't disappear.. Especially the password will look quite flawed when this happens.
    Best regards, Peter

     
  32. ReynierPM2011-04-11 20:33:29

    For some reason the text doesn't appear aligned vertically. How can I fix this? See the image at http://www.dropmocks.com/mTpWU. I'm using jQuery UI also could this be the problem?

     
  33. Mike2011-06-17 13:47:12

    Anyway to keep styling of html element? CSS/class styles are being ignored after the function is applied to an element. i think it is because the "span" elements created are using inline style attributes.

     
  34. yaniv2011-10-19 17:19:23

    how do i make the labels go right to left (rtl) ?

     
  35. Denis2012-01-18 10:04:28

    @Peter Kaiser

    Working is ASP.Net, I found that adding the property Autocomplete="off" to the inputs remove that problem caused by the browser pre-fill...

     
  36. Denis2012-01-18 10:09:05

    Thanks for that plugin !

    @ Peter Kaiser
    I had that problem too. Working in ASP.NET, I found that adding the property Autocomplete="off" to those inputs fields solved that. Perharps it can help to find similar solutions in other code languages.

     
  37. Kinshuk2012-02-13 06:08:38

    Hi

    How to make this plugin work with dynamic created form fields ? or form fields added with ajax? Please help ! I love this plugin but I need it to work for dynamic fields!

     
  38. Danny2012-04-27 13:37:39

    Using version 1.0

    Great plugin.

    Inline labels do not blur/disappear when using Google Chrome autocomplete feature. I DO NOT want to turn autocomplete OFF.

     
  39. Vivek2012-05-03 06:20:15

    Thanks for the plugin.

    I tried your plugin in my drupal website and failed. The inline fields overlap with each other. Here is the link for a screenshot http://i.imgur.com/MWKKw.png

    Can you help me ?

     
  40. Vivek2012-05-03 06:50:07

    When I run the script in "safe mode" , it is working fine. What could be the possible reason behind it?

    In safe mode, I could not see the "password" inline field in text. Other than that what is the difference?

     
  41. Costas Aletrari2012-05-11 22:49:56

    I having a strange problem that my asp.net buttons on the same page are not triggering the codebehind event.?? anyone else??

    any ideas

     
  42. Julien B2012-07-31 15:27:29

    I am having an issue, where I'm posting data from a form on one page and loading it into a form on the second page.

    Fields that had a value loaded into If they delete the data that was loaded into the form on the second page, it doesn't display the labels in the form for that field. Safe mode fixes this, but the grey out was a nice feature.

     
  43. SarahC2012-08-14 11:16:08

    Hi Andrei!

    Thanks for spending the time to publish your excellent plugin. (and I do mean that!)

    I was wondering if I would be able to change the color of the prompt text - so that it is grey for instance?

    The idea being, when the user enters text, the text they enter is in solid black.
    MS have implemented the same kind of colour scheme that I had in mind:
    https://login.live.com/

    Their effect isn't as smooth as yours though. =D

    Thanks for reading, and thanks again for making the plugin public, and documenting it.

     
  44. Anye2012-10-10 11:17:05

    I like this plugin a lot, however, is it possible you might have a chance to update it to be compatible with later versions of jQuery? I have verified that it *does* work with 1.5.1 but *does not* work with 1.8.2.

    Cheers,
    Anye

     
  45. go here2012-11-02 02:21:26

    There is another major disadvantage in it. Though the plugins need to work with different sites, a lot of time will be consumed thus making the working incredibly slow. As you said, the task is not that easy to get generated.

     
  46. super beta prostate scam2012-12-11 11:31:34

    I need some help here, im trying to put the in-line labels using my setup of Custom Fields Search plugin, but I'm getting no breakthrough with it. Looked to make it work with the WP standard search form, its going good there but no good luck with the other. Im trying hard to debug.

     
  47. Drumknott2013-03-10 12:41:41

    This plugin not wordking with jquery 1.9.1

     
  48. Andrei Zharau2013-03-26 21:32:57

    I just rewrote most of the code. Please check https://github.com/natalan/jquery.formLabels
    It's now compatible with jQuery 1.9 and jQuery UI 1.0. Enjoy!

     
  49. Super Beta Prostate Scam2013-05-02 13:06:18

    I tried the brand new iteration of the plugin and I am still getting an error about a problem with PHP code on line 57?

    I don't really understand PHP very well, not sure what to make of this.

     

Leave a Reply





 

0 Trackbacks

Trackback URL for this post:
http://o2v.net/blog/jquery-formlabels-plugin/trackback

30 Pings

  1. 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 [...]

  2. 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 [...]

  3. 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 [...]

  4. jQuery heatmap | WebDesignExpert.Me2010-06-21 05:15:49

    [...] jQuery Formlabels plugin – Link. [...]

  5. Wayne State Web Communications Blog » Blog Archive » [Friday Links] The Father’s Day Edition2010-06-21 08:22:37

    [...] jQuery FormLabels Plugin | Andrei Zharau [...]

  6. links for 2010-06-21 « Mandarine2010-06-21 23:07:27

    [...] jQuery FormLabels Plugin (tags: webdev jquery form) [...]

  7. Fresh jQuery Resources | Design Reviver2010-06-22 03:16:10

    [...] jQuery FormLabels Plugin [...]

  8. Pattern Inc » Fresh jQuery Resources2010-06-22 03:20:44

    [...] jQuery FormLabels Plugin [...]

  9. Fresh jQuery Resources2010-06-22 04:37:04

    [...] jQuery FormLabels Plugin [...]

  10. Fresh jQuery Resources « ClickLogin Web Design2010-06-22 06:23:15

    [...] jQuery FormLabels Plugin [...]

  11. Fresh jQuery Resources - Programming Blog2010-06-22 07:24:55

    [...] jQuery FormLabels Plugin [...]

  12. 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 [...]

  13. Best jQuery plugins – June 2010 « MalarVizhi2010-06-26 01:42:52

    [...] Try out a demo [...]

  14. 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 [...]

  15. 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 [...]

  16. Best jQuery plugins – June 2010 | woogle2010-06-28 21:24:53

    [...] Try out a demo [...]

  17. Resurse pentru programatori şi web designeri #3 | MARGEO2010-07-15 07:18:14

    [...] jQuery FormLabels Plugin [...]

  18. jQuery Resources | with tool2010-07-15 18:13:27

    [...] jQuery Form Labels Plugin to build form input boxes [...]

  19. En iyi jQuery Uygulamaları – Haziran 2010 « Bay Bedava – Netten Başlıklar2011-01-05 08:41:34

    [...] kullanıcılarınıza istediğiniz herhangi bir mesajı iletebilir ve uyarılarda bulunabilirsiniz.jQuery FormLabels Plugin – [...]

  20. Top 10 jQuery Plugin of Year 2010 | AnusTech2011-02-04 01:55:36

    [...] FormLabel This plugin allow you to display the form label inside the form element such as textarea, text field and password field. Pretty useful to create a minimal form. [...]

  21. jQuery forms, 100 best2011-07-26 11:34:58

    [...] FormLabels [...]

  22. แจก JQuery ฟอร์มล็อกอินสวยๆ | Mwebcode2012-08-19 09:48:56

    [...] ตัวนี้ก็ไม่ต่างจากอันที่ 1 ซักเท่าไหร่เพราะเป็นการใส่เอฟเฟค Label แต่ที่พิเศษขึ้นมาหน่อยคือการส่งข้อมูลโดยใช้ Ajax นั่นเอง ดูตัวอย่าง   ดาวน์โหลด [...]

Latest Blog Posts (read all)

  • JavaScript Promise

    Tweet Here is a quick JavaScript Promise implementation: https://github.com/natalan/Promise It comes with all features of jQuery Deferred (waterfall, parallel, or immediate ), but has much smaller footprint (~1Kb minified and gZipped). Fully tested and...

  • My another blog

    Tweet I have stopped writing my link round-ups shortly after I started them. There is a reason for – I’d like to separate the content that I create out of content that was created by someone else. About a month ago, I’ve started my another...

  • Links Roundup #2

    Tweet This week was very productive on different updates in the Web world. The most noticeable were: False Simplicity by Dmitry Fadeyev tells us about very common design mistake of using icon-only navigation approach. In Top 10 Handy Web Typography...