Ever since web designing came into existence, input fields as well as forms have been an inseparable part of all websites. At one point or the other, every website on the internet today makes use of forms and input fields. It is a known fact that HTML is widely used in the creation of a website, but with the introduction of more useful attributes in HTML5, the need to label a form has been reduced to a very large extent. The attribute we are talking about is the HTML 5 “Placeholder”. Placeholder is not only easy to use, rather it saves a lot of space in the code and is very easy to implement and save a lot of developer’s time as well.

However, there are some anomalies that may appear while using the Placeholder attribute instead of using the traditional forms as well as labels. Also in case of a populated form, it becomes very difficult for the users to identify the text and data that is of use to them. Hence there comes the need for a Plugin that will solve this entire problem in the easiest and most elegant manner possible.

Label Better Plugin:

The Label Better Plugin is like a magic wand that will instantly take over all the text inside the Placeholder and create a label out of it. Here comes the most exciting part, the label will be visible to the users only when they will need it. There cannot be anything better than this, right? Now let us take a closer look on how this Plugin works.

The best part about the Label Better Plugin is that it has been tested on all the major web browsers that we use today.

How Label Better Works?

You will be surprised to know that there is nothing complex related to the working of this Plugin. Yes, all the Label Better Plugin does is that it detects the status of the input fields that you are using in your form. It will check for the active fields on your website and if any of the fields are active, all the placeholder text will be grabbed by this Plugin. After this, an extra division container will be generated and then the same will be animated using the CSS3 code. In case the input field is not active, then the Label Better Plugin will look for any kind of population in the field. If the field is found to be empty, the label is automatically removed by the Plugin and the loop will continue as usual. On the other hand, if the field is not empty, then the label will stay as it is.

Hence the problem of usability as well as unwanted space being consumed also gets solved using the Label Better Plugin.

$(“input.label_better”).label_better({

    position: “top”,

    animationTime: 500,

    easing: “ease-in-out”,

    offset: 20

  });

You can call above JS function on your input field and make those more beautiful than ever. You can play with options for more improvement and verities.

Use the data-position field in HTML markup and to get the above function work –

<inputtype=”text”class=”label_better”data-position=”top”placeholder=”Username”>

<inputtype=”text”class=”label_better”data-position=”right”placeholder=”Email Address”>

Using the Label Better Plugin, you can define individual labels as well as create major reforms in your form as well. All you need to do is attach a simple HTML mark up with your normal HTML code and you are ready to go. Download it from here.