Today’s post brings us more or the ever popular jQuery and HTML5 plugins focused on HTML placeholders for form input fields. If you didn’t know HTML5 placeholder is a new attribute to INPUT elements provided to us by HTML5 markup. The placeholder attribute shows text in a field until the field is focused upon, then hides the text. Some browsers such as Internet Explorer however do not support this so jQuery can provide a useful fallback to those unwilling browsers.
HTML5 Placeholder Example
<input type="text" name="email" placeholder="Your email..." />
Let’s take a look at the plugins!
1. Sticky Placeholders jQuery Plugin
2. jQuery Form Labels Plugin
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.
3. jQuery Placeholder Plugin
This is a simple plugin for jQuery that provides support for the HTML5 placeholder attribute in browsers that do not already support it.
A jQuery plugin that formats text input fields with unobtrusive labels featuring interactive suggestions.
5. Sign in Form Placeholders
Tested works IE7+
6. In-Field Labels jQuery Plugin
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.
A jQuery Plugin, presented by Ape Unit GmbH, coded by Paul Lunow.
8. Advanced jQuery Placeholder Plugin (cross-browser support)
Plugin that enables you to use the Placeholder attribute inside your input fields.