20 Aug

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

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

Sponsors

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

Open Source Resources for You

What we need is a list of the top quality resources, so that we can spend more time on our web development. WebAppers only picks the top quality web development resources for you.

Open Source Resources for Web Application Developers

In-Field Labels jQuery Plugin for HTML Forms

Open Source Resources for You

subscribe to our newsletter - weekly free resouces for web developers

follow us on social sites - rss, facebook, google+, Twitter

Open Source Resources for You