/In-Field-Labels-jQuery-Plugin

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

Primary LanguageJavaScript

Fork info

Uses html5 data-infield-label attribute instead of original label.
That way you can still use original labels noramally, and use infield ones for additional info (like placeholders)
If you sate data-infield-label to true, then value of original label would be used.

Use

HTML

<p>
  <label for="field_id">Label Text</label><br />
  <input type="text" name="field_id" value="" id="field_id" data-infield-label="enter value here...">
</p>
<p>
  <label for="field_id">Label Text</label><br />
  <input type="text" name="field_id" value="" id="field_id" data-infield-label="true">
</p>