How to Create Animated Registration Form Using HTML, CSS & JavaScript

Hello World! This is the beginner’s 'how to' post where we are about to create a registration form using HTML, CSS and JavaScript. This registration form contains four fields like User Name, Email, Password and lastly Confirm Password.

HTML, CSS, JavaScript Codes - User Registration Form with Floating Labels

Create User Registration Form Using HTML, CSS & JavaScript

I have already declared that this post is for beginners help therefore you’ll not gonna see some amazing JavaScript coding. So we let’s move forward and take a brief look on what we are about to create.

Logical Explanation

The Idea is so simple; we are going to create the registration form where we use floating animated labels. Whenever we focus on the input fields then the adjacent label will float upside and when we lose the focus from that field then same label move back to its previous position.

If we type something in the input field and after that loose the focus from same field than adjacent label remain upward so that input text and label do not get over lapped. If once again we delete the text inside the input field and loose the focus (blur) from that filed then once again adjacent label will move back to its previous state.

For more elaborated illustration you can check out the demo after the click the below demo link.
Also you copy source code from this page and paste into your local file and run into your favorite browser. Carefully observe what you see and practice yourself.

Click for Demo : Demo : How to Create Animated Registration Form Using HTML, CSS & JavaScript

Here are the HTML codes. Copy and paste into your favorite editor and save as index.html file.



<!DOCTYPE html>
<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">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
<title>CRUD systems</title>
<style>
/*CSS Codes goes here */
</style>
</head>
<body>
<h1>Sign Up Form</h1>

<div class="container">
<div class="myform">
<div class="mylogo">
<i class="fas fa-user"></i>
</div>
<div class="myinput">
<div class="mylabel txt_trans"></div>
<div class="mytext"><input type="text" placeholder="User Name" class="txt_input"></div>
</div>
</div>
<div class="myform">
<div class="mylogo">
<i class="fas fa-envelope"></i>
</div>
<div class="myinput">
<div class="mylabel txt_trans"></div>
<div class="mytext"><input type="email" placeholder="Email" class="txt_input"></div>
</div>
</div>
<div class="myform">
<div class="mylogo">
<i class="fas fa-key"></i>
</div>
<div class="myinput">
<div class="mylabel txt_trans"></div>
<div class="mytext"><input type="password" placeholder="Password" class="txt_input"></div>
</div>
</div>
<div class="myform">
<div class="mylogo">
<i class="fas fa-check"></i>
</div>
<div class="myinput">
<div class="mylabel txt_trans"></div>
<div class="mytext"><input type="password" placeholder="Confirm Password" class="txt_input"></div>
</div>
</div>
<div class="myform">
<div class="mylogo">

</div>
<div class="myinput">
<div class="mylabel txt_trans"></div>
<div class="mytext"><input type="button" value="Save" class="txt_button"></div>
</div>
</div>
</div>

<script>
//JavaScript Codes goes here
</script>
</body>
</html>

Below are the CSS codes which will stylize you HTML tags on browser. Copy and paste into the head tags of index.html file that you recently created. Save it like show in the image.



*{box-sizing: border-box}
body{background: #244e63}/*Change the color of body*/
h1{text-align: center;color:#FFF;}
.myform{height:48px;display: flex;margin:15px;}
.mylogo{width:48px;font-size:24px;display: flex;flex-direction:column;justify-content:flex-end;text-align: center;color:#FFF;}/*--Change the color of logo--*/
.myinput{width:calc(100% - 50px);position: relative;}
.mylabel{position: absolute;left: 0;right: 0;top: 0;bottom: 0;font-size:14px;font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;transition:all 0.3s;color:#edff47} /*--Change the color and transition of label --*/
.mytext{position: absolute;left: 0;bottom: 0;right:4px}
.txt_input{width: 100%;height:25px;outline: none;border: none;border-bottom: 1px solid #aaa;background: transparent;font-size: 16px;color:#FFF}
.txt_trans{font-size:16px;padding-top:22px;color:#999} /*--Change the landing color after transition of label --*/
.txt_button{background:#0099FF;padding:10px 30px;outline:none;border:none;border-radius:5px;color:#fff;font-size:18px;transition:all 0.4s}
.txt_button:hover{background:#ff9900;color:#212121}

At last but the most important one, the JavaScript. Copy and paste the JavaScript code in the script tags located at bottom part of index.html file. Save it like show in the image.



var _ = function($){return document.querySelectorAll($)};
const elem = _(".txt_input");
window.onload = function(){
 addph();
}
var addph = function(){
 for(var i=0;i<elem.length;i++){
  elem[i].parentNode.parentNode.getElementsByClassName("mylabel")[0].innerHTML = elem[i].getAttribute("placeholder");
  elem[i].setAttribute("placeholder", "");
 }
}
for(var i=0;i<elem.length;i++){
 elem[i].onfocus = function(){
  this.parentNode.parentNode.getElementsByClassName("mylabel")[0].classList.remove("txt_trans"); 
 }
 elem[i].onblur = function(){
  if(this.value === ""){
   this.parentNode.parentNode.getElementsByClassName("mylabel")[0].classList.add("txt_trans"); 
  }
 }
}

Save and run the index.html file into your favorite browser. What you are observing please write in to the comment section we will wait for your comments. You can also ask for custom code snippets.

Follow our blog by registering you email on our blog, trust us we will never spam you, also like us on our Facebook page.

Next post will elaborate what is form input validation and how to work with validation process and restrict the user to make and invalid entry on the same form which we have created today. Thanks for joining us have nice day.

Related Topics

progrramers : Web Development Tutorials

How to Create Animated Registration Form Using HTML, CSS & JavaScript

Create User Registration Form Using HTML, CSS & JavaScript

Logical Explanation

Share To:

Post A Comment:

22 comments:

Bootstrap

Recent Posts

Random Posts

Find Sarkari Jobs in India

Recent Comments

Labels

Categories

How to Create Animated Registration Form Using HTML, CSS & JavaScript

Create User Registration Form Using HTML, CSS & JavaScript

Logical Explanation

Share To:

Next

Newer Post

Previous

Older Post

Post A Comment:

22 comments: