Animation CSS Input Label | HTML Inputs Form Above Placeholder

Animation CSS Input Label
This tutorial guide you on how to create an animation CSS Input Label using HTML and CSS?
you will get the code segment for Animation CSS Input Label and HTML form Placeholder shifts above the input on click.

I hope you know very well, about what is form’s label and placeholder. if you don’t know, I will explain everything in this tutorial, see and try to understand.

Therefore in HTML, the <label> tag is used to create labels for items in a user interface,

and the placeholder attributes used to specifies a short hint that describes the value of an

input field. here, I think one question will be raise in mind that can we use a single label for

a placeholder also? yes, we can use an as


therefore, today you will learn how to create Animation CSS input label | HTML input

the form above placeholder means that when you click in input box An HTML form placeholder

which goes above on click. to create this animation I have used jQuery and HTML and CSS,

here you can use pure JS but I have used jQuery because of its very easy. with the help of jQuery
add and remove a single class from HTML elements, and left other major works done with the

help of CSS and HTML.

Explanation About animation CSS Input Label Source Code-

First of all, Let’s talk about the HTML Section, I have created four (4) inputs with their own label, here for declare each label for input I have ID & foresee the below example.

Furthermore, here you can create many inputs as your requirement. here temporary is

class ="decl" which will change by jQuery. if you see in CSS file I have placed the label

middle of inputs, which looks like a placeholder. when you click on the input box then the

label’s text goes above the input or text goes upper side.


for the placing label text above the input, In CSS file I have created a class name

"active"  when you click on the text box I placed the label by "-25" pixels on top.

it goes on top with some delay using the CSS transition. therefore, the Jquery (get)

replaced the "decl" class with this "active" class. that’s are the whole concept which

I have discussed the above for creating the Animation Css Input label.


Therefore For creating Animation CSS input label, you have to need to create three (3) files. First file for HTML as the name "index.html",, the second file for CSS style sheet as the name "stylesheet.css" and the third file for JQuery as the name "function.js", please follow all step as given below.

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

Second Step:  Create a CSS file named ‘stylesheet.css‘ and put these CSS codes given below.

Third Step: Create a JS file named “function.js” and put codes given below.

Therefore, see the code segment to create the Animation CSS Input Label. you will be created successfully. you have to face any trouble then comment me down below. I will try to resolve the problem as soon as possible. thanks for viewing these post.