Input with float labels

This is a classic example of floated labels, which are around the corner for quite some time. This example is with javascript but with the advance CSS you can write one without the javascript. This can be used when you need to save the space in the form and make the labels as big as the input field in the appearances. Once you click on the input field the text floats and moves out allowing you to type on the field. The example in this is a form with the labels and input grouped in the fieldset. These are arranged well with the CSS properties, the trick here is to add the focus class during the selection on the input field and removing it while it is a blur. This is done using javascript. You can use this snippet as it is in filling the contact form and other interactions with the clients. Source: https://codepen.io/KhoaDinh/pen/ozLRbo