Home > Tips

HTML Registration Form - Free HTML Registration Form Download

 

 

As we know, HTML registration form is frequently used by many websites, it allows users to create an account on your website to make your website and your visitors closer. However, creating a HTML registration form manually is really a tough and time consuming job especially for those HTML beginners.

Through this article, wed like to share a creative HTML registration form template with you, it is free. Please dont feel hesitate to download it and you can edit the free HTML registration form template to make it more personal.

In this article, we will also show you the related HTML codes, CSS codes and JavaScript codes to help you know how the HTML registration form is created, we hope it will give you some inspiration when creating your own HTML registration form.

Recommendation: Through the previous articles, we have also shared some creative login form templates with our visitors. If you are also interested in these login form templates, please refer to the below articles:


                   view the css3 checkbox examples        download the css3 checkbox examples



 HTML Codes of the HTML Registration Form

<div class='login clearfix'>
<h2>Sign Up Form</h2>
<p>with steps</p>
<form method='post' action='' id='form-control' >
<div class='control-round' id='control-round'>
<label for='email' class='active'>1</label>
<label for='password'>2</label>
<label for='vpassword'>3</label>
</div>
<div class='control-group'>
<input type='text' name='loginName' id='email' placeholder='Email Address'>
</div>
<div class='control-group'>
<input type='password' name='loginName' id='password' placeholder='Password'>
</div>
<div class='control-group'>
<input type='password' name='loginName' id='vpassword' placeholder='Verify Password'>
</div>
<div class='form-actions'>
<button class='btn' type='submit' >Sign Up</button>
<button class='btn' type='button' >Clear</button>
</div>
</form>
</div>



 

 CSS Codes for the HTML Registration Form

body{
background:#1e1f20;
font-size:18px;
}
.login{
width: 330px;
margin: 40px auto 0;
text-align: center;
}
.login h2{
font:italic 32px/40px 'Impact';
letter-spacing:1px;
color:rgba(0,0,0,0);
background: -webkit-linear-gradient(top,#ffcf6b,#ffc54c 10%,#ffb320 40%,#c16e05);
background: -moz-linear-gradient(top,#ffcf6b,#ffc54c 10%,#ffb320 40%,#c16e05);
background: -o-linear-gradient(top,#ffcf6b,#ffc54c 10%,#ffb320 40%,#c16e05);
background: -ms-linear-gradient(top,#ffcf6b,#ffc54c 10%,#ffb320 40%,#c16e05);
background: linear-gradient(top,#ffcf6b,#ffc54c 10%,#ffb320 40%,#c16e05);
-webkit-background-clip:text;
/*-webkit-text-stroke: 2px #000;*/
}
.login p{
color:#070606;
font-size:28px;
font-style:italic;
font-weight:bold;
text-shadow:1px 1px 0 rgba(255,255,255,.2),-1px -1px 0 rgba(255,255,255,.2);
}
.control-round{
position:relative;
list-style:none;
height:5px;
border:1px solid #222222;
background:#101010;
margin:50px 0 40px;
}
.control-round label{
position:absolute;
top:-18px;
font-family:'Impact';
width:36px;
color:#151515;
line-height:36px;
text-shadow:-1px -1px 1px #666,1px 1px 1px #666;
border-radius:18px;
border:1px solid #686868;
box-shadow:0 0 2px 2px rgba(0,0,0,.2);
background:-webkit-linear-gradient(top,#656565,#393939);
background:-moz-linear-gradient(top,#656565,#393939);
background:-o-linear-gradient(top,#656565,#393939);
background:-ms-linear-gradient(top,#656565,#393939);
background:linear-gradient(top,#656565,#393939);
}
.control-round label.active{
text-shadow:0 1px 0 #f5b738;
border:1px solid #c4883b;
background:-webkit-linear-gradient(top,#f6ae1b,#b46001);
background:-moz-linear-gradient(top,#f6ae1b,#b46001);
background:-o-linear-gradient(top,#f6ae1b,#b46001);
background:-ms-linear-gradient(top,#f6ae1b,#b46001);
background:linear-gradient(top,#f6ae1b,#b46001);
}
.control-round label.active:after,
.control-round label.active:before{
position:absolute;
display:block;
content:'';
border-style:solid;
left:50%;
top:40px;
}
.control-round label.active:after{
margin:5px 0 0 -6px;
border-width:6px;
border-color:#dc8e0f transparent transparent transparent;
z-index:3;
}
.control-round label.active:before{
margin:4px 0 0 -7px;
border-width:7px;
border-color:#000 transparent transparent transparent;
z-index:2;
}
.control-round label:nth-child(1){
left:0;
}
.control-round label:nth-child(2){
left:50%;
margin-left:-18px;
}
.control-round label:nth-child(3){
right:0;
}
.control-group{
position:relative;
margin:20px 0;
}
.control-group:after{
position:absolute;
display:block;
top:10px;
left:12px;
width:25px;
color:rgba(255,255,255,.6);
text-align:center;
font-size:16px;
content: '\21';
font-family: 'icomoon';
font-style: normal;
speak: none;
font-weight: normal;
-webkit-font-smoothing: antialiased;
}
.control-group:nth-child(2):after{
content: '\22';
}
.control-group input{
padding-left:40px;
width:100%;
height:44px;
border-radius:22px;
border:1px solid #2b2b2b;
box-shadow:inset 0 0 10px rgba(0,0,0,1);
background:#151515;
color:#fefefe;
-webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
-moz-transition: border linear 0.2s, box-shadow linear 0.2s;
-o-transition: border linear 0.2s, box-shadow linear 0.2s;
-ms-transition: border linear 0.2s, box-shadow linear 0.2s;
transition: border linear 0.2s, box-shadow linear 0.2s;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.control-group input:focus{
box-shadow: inset 0 1px 3px rgba(255,255,255,0.1), 0 0 8px rgba(255,255,255, 0.6);
}
.form-actions{
text-align:right;
}
.form-actions .btn{
position:relative;
padding:0 20px;
margin-left:5px;
height:35px;
line-height:35px;
color:#000;
text-shadow:0 1px 0 #7f7f7f;
border-radius:17px;
border:1px solid #4f4f4f;
box-shadow:0 0 3px #000;
background:-webkit-linear-gradient(top,#666666,#414141);
background:-moz-linear-gradient(top,#666666,#414141);
background:-o-linear-gradient(top,#666666,#414141);
background:-ms-linear-gradient(top,#666666,#414141);
background:linear-gradient(top,#666666,#414141);
}
.form-actions .btn:hover{
background:-webkit-linear-gradient(top,#757575,#4e4e4e);
background:-moz-linear-gradient(top,#757575,#4e4e4e);
background:-o-linear-gradient(top,#757575,#4e4e4e);
background:-ms-linear-gradient(top,#757575,#4e4e4e);
background:linear-gradient(top,#757575,#4e4e4e);
}
.form-actions .btn:active{
top:1px;
border:1px solid #111;
box-shadow:0 1px 1px #111 inset;
background:-webkit-linear-gradient(top,#4e4e4e,#4e4e4e);
background:-moz-linear-gradient(top,#4e4e4e,#4e4e4e);
background:-o-linear-gradient(top,#4e4e4e,#4e4e4e);
background:-ms-linear-gradient(top,#4e4e4e,#4e4e4e);
background:linear-gradient(top,#4e4e4e,#4e4e4e);
}
.form-actions .btn[type=submit]{
border:1px solid #c36e0e;
text-shadow:0 1px 0 #f4a922;
background:-webkit-linear-gradient(top,#f6ab15,#b46001);
background:-moz-linear-gradient(top,#f6ab15,#b46001);
background:-o-linear-gradient(top,#f6ab15,#b46001);
background:-ms-linear-gradient(top,#f6ab15,#b46001);
background:linear-gradient(top,#f6ab15,#b46001);
}
.form-actions .btn[type=submit]:hover{
background:-webkit-linear-gradient(top,#ffc145,#c26905);
background:-moz-linear-gradient(top,#ffc145,#c26905);
background:-o-linear-gradient(top,#ffc145,#c26905);
background:-ms-linear-gradient(top,#ffc145,#c26905);
background:linear-gradient(top,#ffc145,#c26905);
}
.form-actions .btn[type=submit]:active{
border:1px solid #492700;
box-shadow:0 1px 2px #492700 inset;
background:-webkit-linear-gradient(top,#c16e05,#c16e05);
background:-moz-linear-gradient(top,#c16e05,#c16e05);
background:-o-linear-gradient(top,#c16e05,#c16e05);
background:-ms-linear-gradient(top,#c16e05,#c16e05);
background:linear-gradient(top,#c16e05,#c16e05);
}
@font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot');
src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
url('fonts/icomoon.svg#icomoon') format('svg'),
url('fonts/icomoon.woff') format('woff'),
url('fonts/icomoon.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}



 JavaScript Codes of the HTML Registration Form

window.onload=function(){
var oForm=document.getElementById('form-control');
var aLabel=oForm.getElementsByTagName('label');
var aInput=oForm.getElementsByTagName('input')
for(var i=0;i<aLabel.length;i++){
aInput[i].index=i;
aLabel[i].onclick=function(){
for(var i=0;i<aLabel.length;i++){
aLabel[i].className='';
}
this.className='active';
}
aInput[i].onclick=function(){
for(var i=0;i<aLabel.length;i++){
aLabel[i].className='';
}
aLabel[this.index].className='active';
}
}
}

                                               view the css3 checkbox examples        download the css3 checkbox examples



Choose a SliceMaker Product to Create a Website on Your Own-30 Day Freetrial
SliceMaker Standard V3.6 - Freeware
SliceMaker Standard V3.6 - Freeware
The anyone-can-master webpage making software. You can create exceptional webpage/website on your own even if you're unfamiliar with webpage making.
$0
$0
SliceMaker Platinum V3.6 - Freeware
SliceMaker Platinum V3.6 - Freeware
The bestselling webpage making software, helps you create exceptional webpage/website without writing complicated CSS and DIV codes.
$0
$0
SliceMaker Deluxe V3.6 - Freeware
SliceMaker Deluxe V3.6 - Freeware
The all-in-one webpage making software, helps you create webpage/website of any style. It's the idea tool to create webpage/website.
$0
$0