CSS Input Label Animation | HTML Form Placeholder Above Inputs

I am sure that you know what is Form’s label & placeholder. In HTML, the label tag is used to create labels for items in a user interface, & The placeholder attribute specifies a short hint that describes the value of an input field. Now question is that, can we use a single label for a placeholder also? Yes, we can use an label as a label & as a Placeholder.

Today you will learn to create an Input label animation. Which behave like a placeholder but when you click on the input field then its shift on above the input & became a label. Old days are gone when peoples used placeholder & label together in a form. You can use this on your website because this is the latest & on trend.

So, Today I am sharing CSS Input Label Animation. In other words, An HTML Form Placeholder Which Goes Above The Inputs On Click. I have used jQuery with HTML & CSS, We also can use Pure JS but jQuery is very easy. I have used jQuery for add & remove a single class from HTML element, Left all major works done in CSS HTML.

If you are thinking now how this input label & placeholder animation actually is, then see the preview given below.

[budokan]

Next time, please show your CSS results more frequently as you add styles and please provide a link to your code. I liked it. 👍

[olusegunwusu]

Great and simple.
if(!this.click) did it though, and not if(!this.value)
Thanks.