jQuery Plugin To Create Floating Labels For Inputs - FlowupLabels.js

Just another jQuery plugin to create user-friendly floating placeholders for inputs that float the input label up above the input filed when the user is typing.

See also:

• jQuery Plugin For Floating Placeholder Label Text - JVFloat.js
• jQuery Floating Placeholder Text Plugin - Placeholder Label
• jQuery Plugin For Cool Animated Input Labels
• jQuery Animated Input Field Label Plugin - Label Better
• Simple jQuery Plugin For Inplace Input Labels - LabelinPlace
• jQuery Plugin For Text Field Float Label - floatlabels.js

How to use it:

1. Place the required jquery.FlowupLabels.css stylesheet in the head section of the web page. This stylesheet is marked with comments indicating what should and what shouldn't be changed for your styling purposes.

<link href="css/jquery.FlowupLabels.css" rel="stylesheet">

2. Add labels for your input fields.

<label for="name">Name:</label>
<input type="text" id="name">

3. Call the plugin on the form element.

(function(){
  $('form').FlowupLabels();
})();

4. These are all the default options. You may exclude any/all of these options if you won't be changing them.

$('.form').FlowupLabels({
  
  // Handles the possibility of having input boxes prefilled on page load
  feature_onInitLoad: true, 
  
  // Class when focusing an input
  class_focused:    'focused',

  // Class when an input has text entered
  class_populated:  'populated' 

});

---

This awesome jQuery plugin is developed by ENFOS. For more Advanced Usages, please check the demo page or visit the official website.