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.

How to Create Animated Registration Form Using  HTML, CSS & JavaScript
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-logo

progrramers

Hello friends! Progrramers is a tutorial site of w3 programming. If you like this tutorial site please encourages us by sharing this site links with your friends and nears & dears who want to learn web development and give us like on our Facebook page. If have any question please type in to comment box or send us message on social media sites via below given social links. Thank you, have a nice learning.

Post A Comment:

16 comments:

  1. I sent your articles links to all my contacts website design agencies and they all adore it including me.

    ReplyDelete
  2. there are professional career coaches out there that charges a small fee., web design company los angeles

    ReplyDelete
  3. But trust me, this movie is actually original in its plot structure as there were plot twists I didn’t see coming. los angeles web design

    ReplyDelete
  4. Hi there, I found your website via Google while searching for a related topic, your website came up, it looks great. I have bookmarked it in my google bookmarks. website design company

    ReplyDelete
  5. Very good points you wrote here..Great stuff...I think you've made some truly interesting points.Keep up the good work.data science course in Hyderabad

    ReplyDelete
  6. I recently came across your article and have been reading along. I want to express my admiration of your writing skill and ability to make readers read from the beginning to the end. I would like to read newer posts and to share my thoughts with you.
    data scientist course in hyderabad

    ReplyDelete
  7. Hi Dear, have you been certainly visiting this site daily, if that's the case you then will certainly get good knowledge.
    app design agencies

    ReplyDelete


  8. Great to become visiting your weblog once more, it has been a very long time for me. Pleasantly this article i've been sat tight for such a long time. I will require this post to add up to my task in the school, and it has identical subject along with your review. Much appreciated, great offer. data science course in nagpur

    ReplyDelete
  9. This is an awesome motivating article.I am practically satisfied with your great work.You put truly extremely supportive data. Keep it up. Continue blogging. Hoping to perusing your next post
    cyber security training malaysia

    ReplyDelete