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.
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.
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.
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.
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.
![]() |
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
zdXAszdX
ReplyDeleteI sent your articles links to all my contacts website design agencies and they all adore it including me.
ReplyDeletethere are professional career coaches out there that charges a small fee., web design company los angeles
ReplyDeleteBut 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
ReplyDeleteHi 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
ReplyDeleteVery 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
ReplyDeleteI 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.
ReplyDeletedata scientist course in hyderabad
Informative blog
ReplyDeletedata science course in india
aşk kitapları
ReplyDeleteyoutube 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
www.escortsmate.com
ReplyDeleteescortsmate.com
https://www.escortsmate.com
Thanks for posting the blog is very good .artificial intelligence course in hyderabad
ReplyDeleteThanks 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.
ReplyDeleteData Science Course in Varanasi
Hi Dear, have you been certainly visiting this site daily, if that's the case you then will certainly get good knowledge.
ReplyDeleteapp design agencies
cover coin hangi borsada
ReplyDeletecover 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
ReplyDeleteGreat 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
Informative blog
ReplyDeletecyber security course fees in ahmedabad
Thanks for posting the best information and the blog is very good.data science course in ranchi
ReplyDeleteThanks for posting the best information and the blog is very good.data science course in udaipur
ReplyDeleteThis 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
ReplyDeletecyber security training malaysia
perde modelleri
ReplyDeleteSms onay
Mobil Ödeme Bozdurma
nft nasıl alınır
ankara evden eve nakliyat
trafik sigortası
dedektör
web sitesi kurma
aşk kitapları
Smm panel
ReplyDeletesmm panel
İş ilanları blog
instagram takipçi satın al
hirdavatciburada.com
WWW.BEYAZESYATEKNİKSERVİSİ.COM.TR
SERVİS
tiktok jeton hilesi
kadıköy vestel klima servisi
ReplyDeletemaltepe 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