How To Create Registration Form Design Using HTML & CSS
- hiravepradnya19
- Nov 24, 2020
- 2 min read
Hello, you learned in this blog how to create a registration form, this registration form has been created using only html and CSS. We have already known how to create a registration form. It is designed separately from the registration form and registration form, which you will learn to create.
We have written this registration form inside a form tag of an html with the help of input tag name, email, password etc… This type of input field code is written in this form and also the code of a select option is written and The radio button and the resistor have been given, which looks like a registration form. These html code is designed in CSS which looks beautiful and attractive.
If you want to get the source code of this registration form, then we have given a files, html and CSS code file,these
files Given below, scroll down to get the file and after copying, paste the html code into the html file and paste the CSS code into the CSS file.
HTML & CSS CODE :
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
background-image: url(smile.jpg);
margin-top:40px;
background-position:center;
background-size:cover;
font-family:sans-serif;
}
.regform{
width:800px;
background-color:rgb(0,0,0,0.6);
margin:auto;
color:#FFFFFF;
padding:10px 0px 10px 0px;
text-align:center;
border-radius:15px 15px 0px 0px ;
}
.main{
background-color:rgb(0,0,0,0.5);
width:800px;
margin:auto;}
form{
padding:10px;
}
width:100%;
height:100px;
}
.name{
margin-left:25px;
margin-top:30px;
width: 125px;
color: white;
font-size: 18px;
font-weight: 700;}
.firstname{
position: relative;
left:200px;
top:-37px;
line-height: 40px;
border-radius: 6px;
padding: 0 22px;
font-size: 16px;
}
.lastname{
position: relative;
left:417px;
top:-80px;
line-height: 40px;
border-radius: 6px;
padding: 0 22px;
font-size: 16px;
color:#555;
}
.firstlabel{
position:relative;
color:#E5E5E5;
text-transform: capitalize;
font-size: 14px;
left:203px;
top:-45px;
}
.lastlabel{
position:relative;
color:#E5E5E5;
text-transform:capitalize;
font-size:14px;
left:492px;
top:-76px;
}
.company{
position:relative;
left:200px;
top:-37px;
line-height: 40px;
width:480px;
border-radius: 6px;
padding: 0 22px;
font-size: 16px;
color: #555; }
.email{
position:relative;
left:200px;
top:-37px;
line-height: 40px;
width:480px;
border-radius: 6px;
padding: 0 22px;
font-size: 16px;
color: #555;
}
.Code{
position:relative;
left:200px;
top:-37px;
line-height: 40px;
width:95px;
border-radius: 6px;
padding: 0 22px;
font-size: 16px;
color: #555;
}
.number{
position:relative;
left:200px;
top:-37px;
line-height: 40px;
width:255px;
border-radius: 6px;
padding: 0 22px;
font-size: 16px;
color: #555;
}
.area-code{
position:relative;
color:#E5E5E5;
text-transform:capitalize;
font-size:16px;
left:54px;
top:-4px;
}
.phone-number{
position:relative;
color:#E5E5E5;
text-transform:capitalize;
font-size:16px;
left:-100px;
top:-2px;
}
.option{
position:relative;
left:200px;
top:-37px;
line-height: 40px;
width:532px;
height:40px;
border-radius: 6px;
padding: 0 22px;
font-size: 16px;
color: #555;
outline:none;
overflow:hidden;
}
.option option{
font-size:20px;
}
margin-left:25px;
color:white;
font-size:18px;
}
.radio{
display:inline-block;
padding-right:70px;
font-size:25px;
margin-left:25px;
margin-top:15px;
color:white;
}
.radio input{
width:20px;
height:20px;
border-radius:50%;
cursor:pointer;
outline:none;
}
button{
background-color:#3BAF9F;
display:block;
margin:20px 0px 0px 20px;
text-align:center;
border-radius:12px;
border:2px solid #366473;
padding:14px 110px;
outline:none;
color:white;
cursor:pointer;
transition:0.25px;
}
button:hover{
background-color:#5390F5;
}
</style>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="regform">
<h1>
Registration Form</h1>
</div>
<div class="main">
<form method="POST">
<div id="name">
<h2 class="name">
Name </h2>
<input class="firstname" type="text" name="first_name"><br>
<label class="firstlabel">first name</label>
<input class="lastname" type="text" name="last_name"><br>
<label class="lastlabel">last name</label>
</div>
<h2 class="name">
Company </h2>
<input class="company" type="text" name="company">
<h2 class="name">
Email</h2>
<input class="email" type="email" name="email">
<h2 class="name">
Phone</h2>
<input class="Code" type="text" name="area_code">
<label class="area-code">Area Code</label>
<input class="number" type="text" name="phone">
<label class="phone-number">Phone Number</label>
<h2 class="name">
Subject</h2>
<select class="option" name="subject">
<option disabled="disabled" selected="selected">--Choose option--</option>
<option>Subject 1</option>
<option>Subject 2</option>
<option>Subject 3</option>
</select>
<h2 id="coustomer">
Are you beginner?</h2>
<label class="radio">
<input class="radio-one" type="radio" checked="checked" name="rdiobtn">
<span class="checkmark"></span>
Yes
</label>
<label class="radio">
<input class="radio-two" type="radio" name="rdiobtn">
<span class="checkmark"></span>
No
</label>
<button type="submit">Register</button>
</form>
</div>
</body>
</html>
Comments