WebAppers

/ best free open source web resources /

Shopify

In-Field Labels jQuery Plugin for HTML Forms

Posted · Category: Forms, GPL License, MIT License

In-Field Labels jQuery Plugin is a simple plugin that turns properly formatted HTML forms into forms with in-field label support. Labels fade when the field is focussed and disappear when text entry begins. Clearing a field and leaving brings back the label.

There are some major benefits. The input element or textarea never really has content, so validation can proceed without first checking for the field value. It takes one line of jQuery code to implement. And its compatible with all modern browsers (And even IE6, the “not-so-modern” browser).

In-Field Labels

Requirements: jQuery Framework
Demo: http://fuelyourcoding.com/in-field-labels/
License: GPL, MIT License

4 Comments
  • Dorac

    THUMBS DOWN:

    An interesting plugin… very interesting indeed. A great trick that many would notice when editing a field, yet I find this a waste.

    Everything nowadays revolves around quick response and simplicity. Adding in extra unneeded code is just bloatware and slows the loading down as well as adding possible bugs.

    Conclusion: I like it, but I personally wouldn’t use it.

  • http://twitter.com/VizionThree Silver Firefly

    @Dorac,

    You miss the point. The point is usability. This is actually very simple and it would be helpful to the average Internet user. So any ‘bloat’ from this plugin is minimal, considering that a lot of websites use jQuery anyway.

  • zep

    really interesting and simple !
    so it’s usefull for me :)

    I find another one here http://www.kalou.ch/tutorials/skin-form/

    also interesting :)

  • Saurabh

    Hi

    inFields labels are great, but i need a fix to a problem.

    I am trying to clear the fields using javascript and onblur and onFocus events are not called and label text doesnt appear again. I have seen someone discussing this problem on https://github.com/dcneiner/In-Field-Labels-jQuery-Plugin/issues/2

    but i dont know how to fix it. PLease help

Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons