Animation CSS Input Label | HTML Inputs Form Above Placeholder
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.
|
1 2 3 4 5 6 7 8 9 10 11 |
<label for="FirName">Full Name</label> <input id="FullName" type="text" class="styl"/> <label for="LasName">Department</label> <input id="Dept" type="text" class="styl"/> <label for="LasName">Email</label> <input id="Email" type="text" class="styl"/> <label for="Massag">Your Massage</label> <input id="Massg" type="text" class="styl"/> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<html lang="en" > <head> <meta charset="UTF-8"> <title>Animation CSS Input Label</title> <link rel="stylesheet" href="css/stylesheet.css"> <link href="https://fonts.googleapis.com/css?family=Alegreya+Sans+SC&display=swap" rel="stylesheet"> </head> <body> <div class="main"> <h1>Animation CSS Input Label | HTML Inputs Form Above Placeholder</h1> <div> <label for="FirName">Full Name</label> <input id="FullName" type="text" class="decl"/> </div> <div> <label for="LasName">Department</label> <input id="Dept" type="text" class="decl"/> </div> <div> <label for="LasName">Email</label> <input id="Email" type="text" class="decl"/> </div> <div> <label for="Massag">Your Massage</label> <input id="Massg" type="text" class="decl"/> </div> </div> <script src="JS/function.js"></script> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> </body> </html> |
Second Step: Create a CSS file named ‘stylesheet.css‘ and put these CSS codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
* { font-family: 'Alegreya Sans SC', sans-serif; letter-spacing: 3px; } body { background-color: #fd4d02; color: white; } h1 { margin: 0px; font-size: 24px; padding: 0px; text-align: center; font-size: 24px; } div.main { width: 850px; left: 50%; top: 50%; position: absolute; vertical-align: middle; transform: translate(-50%, -50%); } div.main div { margin: 40px 0; position: relative; } label { position: absolute; top: 0; font-size: 30px; margin: 10px; padding: 0 10px; background-color: #e84a07; -webkit-transition: top .2s ease-in-out, font-size .2s ease-in-out; transition: top .2s ease-in-out, font-size .2s ease-in-out; } .active { top: -25px; font-size: 20px; font-weight: 900; letter-spacing: 6px; text-transform: uppercase; } input[type=text] { width: 100%; padding: 20px; border: 2px solid white; font-size: 20px; font-weight: 800; background-color: #fd4d02; color: white; } input[type=text]:focus { outline: none; } |
Third Step: Create a JS file named “function.js” and put codes given below.
|
1 2 3 4 5 6 7 8 9 |
$('input').on('focusin', function() { $(this).parent().find('label').addClass('active'); }); $('input').on('focusout', function() { if (!this.value) { $(this).parent().find('label').removeClass('active'); } }); |
About Author
