Morioh
Login
Matteo Namoti

Matteo Namoti

4 years ago

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.

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.

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:

<label for="FirName">First Name</label>
<input id="FirName" type="text" class="styl"/>

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.

<!DOCTYPE html>
<!--Code By Webdevtrick ( https://webdevtrick.com )-->
<html lang="en" >
 
<head>
  <meta charset="UTF-8">
  <title>CSS Input Label Animation | Webdevtrick.com</title>
 
  <link href="https://fonts.googleapis.com/css?family=Alegreya+Sans+SC&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="style.css">
 
  
</head>
 
<body>
<div class="main">
  <h1>CSS Label Animation</h1>
  <div>
    <label for="FirName">First Name</label>
    <input id="FirName" type="text" class="styl"/>
  </div>
 
  <div>
    <label for="LasName">Last Name</label>
    <input id="LasName" type="text" class="styl"/>
  </div>
  
  <div>
    <label for="Massag">Your Massage</label>
    <input id="Massag" type="text" class="styl"/>
  </div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
 
    <script  src="function.js"></script>
 
 
</body>
</html>

style.css

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

/** Code By Webdevtrick ( https://webdevtrick.com ) **/
* {
  letter-spacing: 3px;
  font-family: 'Alegreya Sans SC', sans-serif;
}
body {
  color: white;
  background-color: #f05855;
}
 
h1 {
  font-size: 60px;
  margin: 0px;
  padding: 0px;
  text-align: center;
}
 
div.main {
  width: 700px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  vertical-align: middle;
}
 
div.main div {
  position: relative;
  margin: 40px 0;
}
 
label {
  position: absolute;
  top: 0;
  font-size: 30px;
  margin: 10px;
  padding: 0 10px;
  background-color: #f05855;
  -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: #f05855;
  color: white;
}
 
input[type=text]:focus {
  outline: none;
}

function.js

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

/** Code By Webdevtrick ( https://webdevtrick.com )  **/
$('input').on('focusin', function() {
  $(this).parent().find('label').addClass('active');
});
 
$('input').on('focusout', function() {
  if (!this.value) {
    $(this).parent().find('label').removeClass('active');
  }
});

That’s It. Now you have successfully created CSS Input Label Animation, An HTML Form Placeholder Which Goes Above Inputs On Click.

Thanks For Visiting, Keep Visiting.

Originally published on https://webdevtrick.com

#css #css3 #html5 #html #jquery

CSS Input Label Animation | HTML Form Placeholder Above Inputs
2 Likes117.90 GEEK