In this article, you will learn how to create a simple registration form using HTML and CSS. The registration form is an important webinar. This type of HTML CSS registration form is used to create new accounts on different types of websites.
There are many types of registration forms. Some registration forms are simple and some are very complex. Most of the login forms are common where the account is created using the name, email id, city, country, etc.
Earlier I shared with you the tutorials for almost all types of login and registration forms. This Simple Registration Form has been created with the help of HTML and CSS only.
However, it is not responsive. You need to use some CSS code separately to generate responses.
Registration Form in HTML CSS
This tutorial will definitely help you if you want to create an HTML registration form. I have provided a live demo that will help you to know how this HTML CSS registration form works.
First I made a box on the web page then I used a heading. First I created a box to input the name. Then I created an input box to input email id, city, country, etc.
Then I created two checkboxes using HTML checkboxes. This is mainly for selecting gender. Then there is a registration button which, when clicked, will be used to register a new account with all this information.
How to Create a Registration Form in HTML
I have already shared a step-by-step tutorial on how to create such a simple registration form. I have not shared any tutorial here, only the source code given here. If you want tutorials then you can follow my previous designs.
To make it (Simple Registration Form Source Code) you need to have a basic idea about HTML and CSS. First, create an HTML and CSS file then copy the code below and add it to that file.
HTML Code for Registration Form
We have created the basic structure of this registration form using the following HTML and CSS codes.
If you can't add all these codes together, you can take the help of the demo section above. All of the above source codes are linked together.
The following CSS codes have helped to design this HTML registration form. Here are the required CSS codes. First I designed the webpage.
Then he designed the titles and the places to input. I have designed the registration button at the end of all. Copy the following CSS codes and input them into your CSS file.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
font-family: 'Montserrat', sans-serif;
}
body{
background: linear-gradient(
105deg,
#88beee ,
#0a2e73
);
}
.wrapper{
justify-content: center;
align-items: center;
min-height: 100vh;
display: flex;
}
.registration_form{
border-radius: 5px;
width: 400px;
background: white;
padding: 25px;
}
.registration_form .title{
color: white;
background:rgb(13, 98, 215);
letter-spacing: 2px;
font-weight: 700;
text-align: center;
font-size: 25px;
text-transform: uppercase;
margin-top: -25px;
margin-left:-25px;
margin-right:-25px;
}
.form_wrap{
margin-top: 35px;
}
.form_wrap .input_wrap{
margin-bottom: 15px;
}
.form_wrap .input_wrap:last-child{
margin-bottom: 0;
}
.form_wrap .input_wrap label{
margin-bottom: 3px;
color: #1a1a1f;
display: block;
}
.form_wrap .input_grp{
display: flex;
justify-content: space-between;
}
.form_wrap .input_grp input[type="text"]{
width: 165px;
}
.form_wrap input[type="text"]{
width: 100%;
padding: 10px;
outline: none;
border-radius: 3px;
border: 1.3px solid #9597a6;
}
.form_wrap input[type="text"]:focus{
border-color: #063abd;
}
.form_wrap ul{
padding: 8px 10px;
border-radius: 20px;
display: flex;
justify-content: center;
border:1px solid rgb(115, 185, 235);
width:70%;
background: rgb(206, 238, 242);
margin-left: 15%;
}
.form_wrap ul li:first-child{
margin-right: 15px;
}
.form_wrap ul .radio_wrap{
position: relative;
margin-bottom: 0;
}
.form_wrap ul .radio_wrap .input_radio{
position: absolute;
top: 0;
right: 0;
opacity: 0;
}
.form_wrap ul .radio_wrap span{
display: inline-block;
font-size: 17px;
padding: 3px 15px;
border-radius: 15px;
color: #101749;
}
.form_wrap .input_radio:checked ~ span{
background: #105ce2;
color:white;
}
/* Submit Button */
.form_wrap .submit_btn{
font-size:17px;
border-radius: 3px;
text-transform: uppercase;
letter-spacing: 2px;
cursor: pointer;
width: 100%;
background: #0d6ad7;
padding: 10px;
border: 0;
color:white;
}
/* Button Hover effect */
.form_wrap .submit_btn:hover{
background: #051c94;
}
I hope you have been able to create this registration or application form using the above codes. If there is any problem then you can definitely take the help of the download button below.
If you want to see the Live Preview of this simple registration form, you can take the help of the demo section above.
If you are a beginner and want to know how to make it step-by-step, you can follow this link. In that tutorial, I have shown step by step how to create a registration form using HTML and CSS.
