Skip to main content

8 jQuery Form Label (HTML5 Placeholder) Plugins

By Sam Deering

JavaScript

Share:

Free JavaScript Book!

Write powerful, clean and maintainable JavaScript.

RRP $11.95

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

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

Sam Deering has 15+ years of programming and website development experience. He was a website consultant at Console, ABC News, Flight Centre, Sapient Nitro, and the QLD Government and runs a tech blog with over 1 million views per month. Currently, Sam is the Founder of Crypto News, Australia.

New books out now!

Learn valuable skills with a practical introduction to Python programming!


Give yourself more options and write higher quality CSS with CSS Optimization Basics.