8 jQuery Form Label (HTML5 Placeholder) Plugins

Sam Deering
Tweet

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

Tested works IE7+
Sticky-Placeholders.jpg
SourceDemo

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.

jQuery-Form-Labels.jpg
SourceDemo

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.

jQuery-Placeholder.jpg
Source + Demo

4. jLabel

A jQuery plugin that formats text input fields with unobtrusive labels featuring interactive suggestions.

jLabel.jpg
Source + Demo

5. Sign in Form Placeholders

Tested works IE7+

Sign-in-Form-Placeholders.jpg
Source + Demo

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.

In-Field-Labels.jpg
Source

7. movinglabels

A jQuery Plugin, presented by Ape Unit GmbH, coded by Paul Lunow.

movinglabels.jpg
Source + Demo

8. Advanced jQuery Placeholder Plugin (cross-browser support)

Plugin that enables you to use the Placeholder attribute inside your input fields.

Advanced-jQuery-Placeholder.jpg
Source

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.