Float label pattern

Forms are one of the most important parts of the webpage that needs to be clean and have great user experience at the same time.

In an effort to make forms look nicer visually, designers and developers have sacrificed usability by replacing field labels with placeholders.

Luckily, now we can have the concept of placeholder and the label for user experience by floating the label when the user starts typing( Thanks to Matt D Smith).

Approach for float label

The way this concept(float label/google material design form) has been handled is that the CSS “focus” property has been used to move the label up when it’s been focused, but with JavaScript the label stays top if the user inputs some data.
You can do the float label only via CSS or with the help of little JavaScript. Below demo uses JS(jquery).

The reason behind using script for checking whether data is there or not is to make it work even in older browser including IE lower versions and also if you need CSS alone, the “required” attribute has to been given to the input field which in turn the error pop-up shows if user enter wrong data and it messes with your custom error style if used any. If you like to have the default error pop-up you can go with the CSS only way which I will be mentioning after the JS way.

Demo

See the Pen Float Label Pattern by idevelopweb.site (@webstuff) on CodePen.0

CSS only
To use CSS only without the help of Javascript you need to use “valid” css property

.adiptxt:valid + label{
font-size: 12px;
top: 12px;
color: #6e827b;
}

Note:The input tag must have “required” attribute so that “valid” property works.

Chrome browser autocomplete fix

You will encounter this overlap issue if you don’t wish to off the autocomplete for the input tag(eg. login form).

In that case you can add the below script along with the script mentioned above in the demo to overcome the issue by checking the value onload and also onchange of the other elements.

 $(document).ready(function() {
     $("input").change(function() {
         $('.check').each(function() {
             if ($(this).val() != "") {
                 $(this).next('label').addClass("top_lb");
             } else {
                 $(this).next('label').removeClass("top_lb");
             }
         });
     });
     $('.check').each(function() {
         if ($(this).val() != '') {
             $(this).next('label').addClass("top_lb");
         } else {
             $(this).next('label').removeClass("top_lb");
         }
     });

 });

Note: If you load the form via ajax, you need to make the script trigger after the form loads.