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

at
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

Share To:
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.

How To

Post A Comment:

40 comments:

  1. Lauren Chevalier23 June 2020 at 00:00

    zdXAszdX

    ReplyDelete
  2. Timmy Fiscus24 June 2020 at 21:59

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

    ReplyDelete
  3. mtom8 July 2020 at 03:30

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

    ReplyDelete
  4. George9 July 2020 at 06:29

    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
  5. william locas13 July 2020 at 04:11

    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
  6. priyanka2 September 2020 at 05:06

    Attend The Data Analyst Course From ExcelR. Practical Data Analyst Course Sessions With Assured Placement Support From Experienced Faculty. ExcelR Offers The Data Analyst Course.
    Data Analyst Course

    ReplyDelete
  7. Unknown9 September 2020 at 14:32

    Great Article Artificial Intelligence Projects

    Project Center in Chennai

    JavaScript Training in Chennai

    JavaScript Training in Chennai

    ReplyDelete
  8. EXCELR26 November 2020 at 02:30

    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
  9. Excelr Tuhin30 January 2021 at 09:04

    I've read this post and if I could I desire to suggest you some interesting things or suggestions. Perhaps you could write next articles referring to this article. I want to read more things about it!
    Data Science course in Hyderabad

    ReplyDelete
  10. data scientist course26 March 2021 at 21:10

    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
  11. Deekshitha29 April 2021 at 09:12

    Informative blog
    data science course in india

    ReplyDelete
  12. Maneesha7 June 2021 at 21:14

    I surely acquiring more difficulties from each surprisingly more little bit of it
    data scientist training and placement

    ReplyDelete
  13. Unknown21 July 2021 at 05:59

    aşk kitapları
    youtube abone satın al
    cami avizesi
    cami avizeleri
    avize cami
    no deposit bonus forex 2021
    takipçi satın al
    takipçi satın al
    takipçi satın al
    takipcialdim.com/tiktok-takipci-satin-al/
    instagram beğeni satın al
    instagram beğeni satın al
    btcturk
    tiktok izlenme satın al
    sms onay
    youtube izlenme satın al
    no deposit bonus forex 2021
    tiktok jeton hilesi
    tiktok beğeni satın al
    binance
    takipçi satın al
    uc satın al
    sms onay
    sms onay
    tiktok takipçi satın al
    tiktok beğeni satın al
    twitter takipçi satın al
    trend topic satın al
    youtube abone satın al
    instagram beğeni satın al
    tiktok beğeni satın al
    twitter takipçi satın al
    trend topic satın al
    youtube abone satın al
    takipcialdim.com/instagram-begeni-satin-al/
    perde modelleri
    instagram takipçi satın al
    instagram takipçi satın al
    takipçi satın al
    instagram takipçi satın al
    betboo
    marsbahis
    sultanbet

    ReplyDelete
  14. Unknown12 August 2021 at 10:32

    marsbahis
    betboo
    sultanbet
    marsbahis
    betboo
    sultanbet

    ReplyDelete
  15. Mallela12 August 2021 at 19:01

    Thanks for posting the best information and the blog is very important.digital marketing institute in hyderabad

    ReplyDelete
  16. Unknown15 August 2021 at 19:48

    www.escortsmate.com
    escortsmate.com
    https://www.escortsmate.com

    ReplyDelete
  17. Mallela23 August 2021 at 07:37

    Thanks for posting the blog is very good .artificial intelligence course in hyderabad

    ReplyDelete
  18. Mallela25 August 2021 at 06:27

    Thanks for posting the best information and the blog is very good.data science institutes in hyderabad

    ReplyDelete
  19. Data Science Course in Bhilai - 360DigiTMG26 August 2021 at 23:19

    Thanks for bringing such innovative content which truly attracts the readers towards you. Certainly, your blog competes with your co-bloggers to come up with the newly updated info. Finally, kudos to you.

    Data Science Course in Varanasi

    ReplyDelete
  20. Data Scientist Course in Dombivli13 September 2021 at 02:07

    Extremely overall quite fascinating post. I was searching for this sort of data and delighted in perusing this one. Continue posting. A debt of gratitude is in order for sharing. data analytics course in delhi

    ReplyDelete
  21. Petter John17 September 2021 at 23:22

    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
  22. Lwinx2 October 2021 at 08:35

    cover coin hangi borsada
    cover coin hangi borsada
    cover coin hangi borsada
    xec coin hangi borsada
    ray hangi borsada
    tiktok jeton hilesi
    tiktok jeton hilesi
    tiktok jeton hilesi
    tiktok jeton hilesi

    ReplyDelete
  23. data science16 October 2021 at 01:50



    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
  24. Deekshitha24 November 2021 at 09:06

    Informative blog
    cyber security course fees in ahmedabad

    ReplyDelete
  25. Mallela24 January 2022 at 07:38

    Thanks for posting the best information and the blog is very good.data science course in ranchi

    ReplyDelete
  26. Mallela24 January 2022 at 07:39

    Thanks for posting the best information and the blog is very good.data science course in udaipur

    ReplyDelete
  27. Mallela25 January 2022 at 04:57

    Thanks for posting the best information and the blog is very good.business analytics course in rajkot

    ReplyDelete
  28. Mallela25 January 2022 at 04:57

    Thanks for posting the best information and the blog is very good.business analytics course in ranchi

    ReplyDelete
  29. Mallela2 February 2022 at 05:31

    Thanks for posting the best information and the blog is very good.data analytics courses in ranchi

    ReplyDelete
  30. Mallela2 February 2022 at 05:32

    Thanks for posting the best information and the blog is very good.data science training in udaipur

    ReplyDelete
  31. Mallela2 February 2022 at 05:32

    Thanks for posting the best information and the blog is very good.business analytics course in udaipur

    ReplyDelete
  32. Unknown5 February 2022 at 06:16

    tiktok jeton hilesi
    tiktok jeton hilesi
    referans kimliği nedir
    gate güvenilir mi
    tiktok jeton hilesi
    paribu
    btcturk
    bitcoin nasıl alınır
    yurtdışı kargo

    ReplyDelete
  33. Unknown24 March 2022 at 09:47

    evden eve nakliyat
    instagram takipçi satın al
    instagram takipçi satın al
    instagram beğeni satın al
    tiktok takipçi satın al
    bitcoin nasıl alınır
    plaj havlusu
    toptan zeytinyağı
    bardak makinası

    ReplyDelete
  34. Unknown6 April 2022 at 05:15

    seo fiyatları
    saç ekimi
    dedektör
    instagram takipçi satın al
    ankara evden eve nakliyat
    fantezi iç giyim
    sosyal medya yönetimi
    mobil ödeme bozdurma
    kripto para nasıl alınır

    ReplyDelete
  35. traininginstitute21 April 2022 at 21:43

    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
  36. Unknown23 April 2022 at 23:07

    bitcoin nasıl alınır
    tiktok jeton hilesi
    youtube abone satın al
    gate io güvenilir mi
    referans kimliği nedir
    tiktok takipçi satın al
    bitcoin nasıl alınır
    mobil ödeme bozdurma
    mobil ödeme bozdurma

    ReplyDelete
  37. Rodosq29 April 2022 at 05:17

    İnstagram takipçi satın al! İnstagram takipçi sitesi ile takipçi satın al sende sosyal medyada fenomen olmaya bir adım at. Sende hemen instagram takipçi satın almak istiyorsan tıkla:

    1- takipçi satın al

    2- takipçi satın al

    3- takipçi satın al

    ReplyDelete
  38. Unknown17 May 2022 at 08:24

    perde modelleri
    Sms onay
    Mobil Ödeme Bozdurma
    nft nasıl alınır
    ankara evden eve nakliyat
    trafik sigortası
    dedektör
    web sitesi kurma
    aşk kitapları

    ReplyDelete
  39. Unknown30 May 2022 at 20:27

    Smm panel
    smm panel
    İş ilanları blog
    instagram takipçi satın al
    hirdavatciburada.com
    WWW.BEYAZESYATEKNİKSERVİSİ.COM.TR
    SERVİS
    tiktok jeton hilesi

    ReplyDelete
  40. Unknown2 June 2022 at 14:44

    kadıköy vestel klima servisi
    maltepe bosch klima servisi
    kadıköy bosch klima servisi
    maltepe arçelik klima servisi
    kadıköy arçelik klima servisi
    kartal samsung klima servisi
    ümraniye samsung klima servisi
    pendik mitsubishi klima servisi
    tuzla vestel klima servisi

    ReplyDelete

Subscribe to: Post Comments (Atom)