Label your Input Fields like a Boss with Label_Better.js

Forms and inputs have been an integral part of web design since the birth of it and with the introduction of the HTML5 attribute, "placeholder", the need to label your form has become less and less important. For one, it saves more space to simply use a placeholder text, second, it is much easier for designers and developers to implement it. What you and me may not have realized before is that there’s one usability issue with this approach.

Imagine this scenario, there’s a form with input fields populated, how can the user know what each field is for if the populated data is showing instead of the placeholder text? Let me introduce my little plugin that will let you solve this in an elegant way called Label Better.

Label Better will automatically grab the placeholder text and create a label on the fly that will only show when the user needs it. How? Well, let’s get to it shall we?

Note: This plugin has been tested on Chrome, Firefox, Safari, both on desktop and mobile. This has not been tested on IE.

Label your Input Fields like a Boss with Label_Better.js


How to Use Label_Better.js

How does this work?

The concept is pretty simple, the plugin detects the state of the input fields. If the field is active, then the plugin will grab the placeholder text, generate an extra div container and animate it with CSS3 above (or in any direction) the input field. When the field is no longer active, the plugin checks if there’s anything populated in the field, if it’s empty then the plugin will remove the label and the loop continues, If it is not, then the label will stay where it is. This basically solves the usability problem I mentioned earlier.

How-Tos

Since this is a jQuery plugin, be sure to include the latest jQuery library available here and include the jQuery.label_better.js available here, in to your document’s <head>.

Now, all you have to do is call the function on your input fields like this and everything will work beautifully.

JS

$("input.label_better").label_better({
    position: "top",
    animationTime: 500,
    easing: "ease-in-out",
    offset: 20
  });

Now, it’s time to cover with the options I put in place for you to play around with:

  • position: This option will let you define the position where the label will appear relative to the input field. Acceptable options are “left”, “right”, “top" and “bottom”. The default value is “top”.
  • animateTime: Adjust the number here to speed up or slow down the animation when the label appears. This option accepts the number in milliseconds (without the unit), for example, the default value is “500” which will animate the label within the 500ms time frame.
  • easing: This is similar to the CSS easing option. It will let you define what kind of easing the animation will use. Acceptable values are linear, ease, ease-in, ease-out, ease-in-out and cubic-bezier which you can generate here. The default value is “ease-in-out”.
  • offset: You can add spacing between the field and the label here. The option accepts numbers in pixels (without the unit). The default value is “10”.

HTML Markups

With Label Better plugin, you can define an individual option and override the global option with a simple HTML markup attached to your field. Here are all the available markups:

data-position
This markup will let you define each individual field its own label position. Simply add the data-position attribute to your input tag as shown below and the option will override the position defined in the function call. Here’s an example:

HTML

<input type="text" class="label_better" data-position="top" placeholder="Username">
<input type="text" class="label_better" data-position="right" placeholder="Email Address">

data-new-placeholder
Same goes for the data-new-placeholder attribute, but in this case, the label will use the data-new-placeholder content instead of using the placeholder content. There may be times when you want your placeholder text to be different from the label text such as adding icons to the label and not the placeholder. Here’s an example:

HTML

<input type="text" class="label_better" data-new-placeholder="Type your username" placeholder="Username">
<input type="text" class="label_better" data-new-placeholder="Type your email address" placeholder="Email Address">

Conclusion

That should be a wrap for my Label Better plugin. I can’t wait to see what you guys will come up with using this plugin. I hope you guys enjoy this tutorial and if you have any questions, suggestions or need any help, let me know in the comments below.