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+

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.

Source + Demo

4. jLabel

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

Source + Demo

5. Sign in Form Placeholders

Tested works IE7+

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.


7. movinglabels

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

Source + Demo

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

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


Tags: jQuery and HTML5 degradation
Sam Deering is a Front-end Web Developer who specialises in JavaScript & jQuery. Sam is driven and passionate about sharing his knowledge to educate others.
Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!