Input Field Animation – CodingNepal https://www.codingnepalweb.com CodingNepal is a blog dedicated to providing valuable and informative content about web development technologies such as HTML, CSS, JavaScript, and PHP. Thu, 04 May 2023 13:51:23 +0000 en-US hourly 1 https://wordpress.org/?v=6.4.2 Input Label Animation in HTML & CSS https://www.codingnepalweb.com/css-animation-input-label/ https://www.codingnepalweb.com/css-animation-input-label/#respond Fri, 02 Dec 2022 21:11:21 +0000 https://www.codingnepalweb.com/?p=4135 Input Label Animation in HTML & CSS

When you come to fill out a form, you may have seen there is an amazing Floating Label Animation. If you are looking for a quick and easy way to create CSS Input Label Animation then this blog is written for you.

This blog will teach you how to create an Input Label Animation using HTML and CSS only. This type of animation typically appears when we click on an input field to enter some information. In my recent blog post, I have provided  10 Free Responsive Navigation Bar, which could also enhance your skills in HTML CSS as well as JavaScript.

The float label pattern floats the inline label up above the input after the user focuses on the form field or enters a value.This method is much more space-saving than the conventional heading in front of a form field.

Have a quick look at the given image of my Input Label Animation. As you can see on this Floating Label Animationin the first input field there is an input box and inside it there is a label and you can see in the second input box that the label has gone up when the input box is in focus.

If you’re wondering how this input label animation truly works, take a look at the preview provided below. I have explained all the HTML and CSS code that I have used to create this Input Label Animation.

 Input Label Animation in HTML & CSS | Video Tutorial

All of the HTML and CSS code that I used to create this Floating Label Animation is provided. Instead of duplicating the code or downloading the source code file, I strongly advise you to watch the full video explanation of this Input Label Animation. By watching the video tutorial, you can create this Input Label Animation.

As you have seen in the video tutorial of this Input Label Animation. Basically, it’s an input with a lot of CSS effects.  As you have seen when I click inside it, the label goes up left, and when we write something on the input, label stays on top, but when we clear the input box, the label come to its original position.

Now, hopefully, you can create this Input Label Animation using HTML and CSS. The source codes for all the HTML and CSS I used to develop this Input Label Animation are provided below.

You May Like This Video:

To create an Input Label Animation, follow the given steps line by line:
  1. Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
  2. Create an index.html file. The file name must be index and its extension .html
  3. Create a style.css file. The file name must be style and its extension .css
  4. Create a script.js file. The file name must be script and its extension .js

Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the an Input Label Animation by clicking on the given download button.

First, paste the following codes into your index.html file.

<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Input Label Animaton | CoderGirl</title>
  <!---Custom CSS File--->
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="input-field">
    <input type="text" required spellcheck="false"> 
    <label>Enter email</label>
  </div>
</body>
</html>

Second, paste the following codes into your style.css file.

/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #060b23;
}
.input-field{
  position: relative;
}
.input-field input{
   width: 350px;
  height: 60px;
  border-radius: 6px;
  font-size: 18px;
  padding: 0 15px;
  border: 2px solid #fff;
  background: transparent;
  color: #fff;
  outline: none;
}
.input-field label{
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
  color: #fff;
  font-size: 19px;
  pointer-events: none;
  transition: 0.3s;
}
input:focus{
  border: 2px solid #18ffff;
}
input:focus ~ label,
input:valid ~ label{
  top: 0;
  left: 15px;
  font-size: 16px;
  padding: 0 2px;
  background: #060b23;
}

That’s all, now you’ve successfully created a project on an Input Label Animation. If your code doesn’t work or you’ve faced any problems, please download the source code files from the given download button. It’s free and a zip file containing the project folder with source code files will be downloaded.

 

]]> https://www.codingnepalweb.com/css-animation-input-label/feed/ 0 Limit Input Characters using HTML CSS & JavaScript https://www.codingnepalweb.com/limit-input-characters-using-html-css-javascript/ https://www.codingnepalweb.com/limit-input-characters-using-html-css-javascript/#comments Mon, 15 Mar 2021 10:25:00 +0000 Limit Input Characters using HTML CSS & JavaScript
Hey friends, today in this blog you’ll learn how to Limit Input Characters using HTML CSS & JavaScript. Earlier I have shared a blog on how to create Random Password using pure JavaScript and now I’m going to create a program or input field that allowed users to enter a specified number of characters only.
 
In this program [Limit Input Characters], there is an input field on the webpage with an icon and counter number. This counter number informs the user about how many numbers of characters they can enter. At first, this input field is inactive with a grey border color but when you focus on the input field then the color of the border change into another color which means the input field is active now.
 
When you start typing some characters in the input field then the color of the icon and counter also change into the same color as the input border color as well the counter starts decreasing by the number of your entered characters.
 
If you want to watch a full video tutorial or feeling difficult to understand what I’m saying above then you can the full video of this program [Limit Input Characters]

Video Tutorial on How to Limit Input Characters

 
In the video, you have seen the demo of this design or program and how I created this. As you know, I used JavaScript to make the counter dynamic and I believe these few lines of JavaScript were not much difficult to understand for you even if you’re a beginner. Except this all other parts including changing border color on focus in the input field and changing the color of the icon if user input some characters are purely created using HTML & CSS only.

This can be only possible using required attribute in the <input type=”text”> tag and :focus & :valid selectors in CSS. In this video, I have just shown you limit input characters in input but with the same codes, you can also do for the Textarea field.

You might like this:

Limit Input Characters in JavaScript [Source Codes]

To create this program [Limit Input Characters]. First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes into your file. You can also download the source code files of this Limit Input Characters from the below download button.

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

<!DOCTYPE html>
<!-- Created By CodingNepal - www.codingnepalweb.com -->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Limit Input Characters | CodingNepal</title>
  <link rel="stylesheet" href="style.css">
  <!-- Iconsout Link for Icons -->
  <link rel="stylesheet" href="https://unicons.iconscout.com/release/v3.0.6/css/solid.css">
</head>
<body>
  <div class="wrapper">
    <form action="#">
      <input type="text" spellcheck="false" placeholder="username" maxlength="19" required>
      <i class="uis uis-at"></i>
      <span class="counter">19</span>
    </form>
  </div>

  <script>
    const input = document.querySelector("form input"),
    counter = document.querySelector("form .counter"),
    maxLength = input.getAttribute("maxlength");

    input.onkeyup = ()=>{
      counter.innerText = maxLength - input.value.length;
    }
  </script>

</body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(to top, #56e2d7 0%, #58cff1 100%);
}
.wrapper{
  background: #fff;
  padding: 20px;
  width: 450px;
  border-radius: 5px;
  box-shadow: 0px 5px 10px rgba(0,0,0,0.1);
}
.wrapper form{
  height: 55px;
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
}
form i{
  position: absolute;
  width: 55px;
  text-align: center;
  font-size: 23px;
  color: #c4c4c4;
  pointer-events: none;
}
form input:valid ~ i{
  color: #58cff1;
}
form input{
  height: 100%;
  width: 100%;
  outline: none;
  padding: 0 50px 0 45px;
  font-size: 20px;
  caret-color: #58cff1;
  border: 2px solid #ddd;
  border-radius: 5px;
  transition: all 0.1s ease;
}
form input::selection{
  color: #fff;
  background: #58cff1;	
}
form input:focus,
form input:valid{
  border-color: #58cff1;
}
form input::placeholder{
  color: #c4c4c4;
}
form .counter{
  position: absolute;
  right: 3px;
  width: 55px;
  font-size: 20px;
  color: #c4c4c4;
  text-align: center;
  border-left: 1px solid #d8d8d8;
  pointer-events: none;
}
form input:valid ~ .counter{
  color: #58cff1;
  border-color: #58cff1;
}

That’s all, now you’ve successfully created a Limit Input Characters using HTML CSS & JavaScript. If your code does not work or you’ve faced any error/problem then please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.

 

]]> https://www.codingnepalweb.com/limit-input-characters-using-html-css-javascript/feed/ 1