css input label animation

How we can create an Input Label Animation Using HTML CSS & JS? Solution: CSS Input Label Animation, HTML Form Placeholder Shift Above The Inputs On Click.

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.

Preview Of HTML Form Placeholder Above Inputs

See this video preview to getting an idea of how this project’s animation looks like.

Now you can see this visually. If you like this, then get the source code of its.

You May Also Like:

CSS Input Label Animation Source Code

Before sharing source code, let’s talk about this. In the HTML section, I have created 3 inputs with their own label, to declare each label for input I used ID & FOR. Example:

In the same way, created 2 other inputs, you can create many inputs as your requirement. The class= "styl"is a temporary class which will change by jQuery. In CSS file I have placed the label middle of input, that looks like a placeholder. When you click on the input then the label’s text goes upper side or above the input.

After that, I have created a class named ‘active‘ In this class, I placed the label by -25 pixels on top. It goes on top with some delay using the CSS transition. Now jQuery (get) replaces the ‘styl‘ class with this ‘active‘ class.  That’s it the whole concept.

For creating this input label animation, you have to create 3 files. First for HTML, second for CSS, & third for JS. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

style.css

Now create a CSS file named ‘style.css‘ and put these codes.

function.js

Now create a JavaScript file named ‘function.js‘ and put the codes.

That’s It. Now you have successfully created CSS Input Label Animation, An HTML Form Placeholder Which Goes Above Inputs On Click. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.

6 COMMENTS

  1. Hey hi thanks for the code but do you know how to make borders of input have gradient, I tried border-image but it cannot have border-radius
    In case you know something about how to have a input border gradient and curved at edges.

  2. Thanks for the tutorial!

    Unfortunately I can’t seem to separate the labels: as soon as I click on name all of them activate. Do you have a solution for this problem?

LEAVE A REPLY

Please enter your comment!
Please enter your name here