Hello friends, 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.
If you want to know about all those registration forms, then you can read them by clicking on the link of registration form and you can also go to html & CSS menu and click on the registration form's sub-menu and read it.
You can see in this image that we have designed using html and CSS code even before we have shared the registration form which is designed from html and CSS
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.
Registration Form Design Using Html And CSS Source Codes
We know about html code of registration form. We have first taken a div to create this form whose class name is regform. An h1 tag is taken inside this div. The h1 tag is called the largest heading of this tag. Used for heading Another given below the class regform, whose class name is main.
A form tag is taken inside the class name main. A div is first taken inside this form tag whose ID name is named. The h2 input and span tag are taken inside the id to define the complete structure of the form.
We know about the style of the css of the registration form. Like us, we have zeroed the margin and padding this time, followed by background-position by giving the background tag to the body tag, followed by the background color and width of the class regform. The watch is set
This form is not designed in the @ media screen, you can respond to this form by designing it in the @ media screen, so that you can view this form easily in the mobile tab. If you know JavaScript, you can use this form in your blog or website.
If you are having difficulties in understanding this registration form, then you can understand it by watching the video of this form, which we have given below.
A form tag is taken inside the class name main. A div is first taken inside this form tag whose ID name is named. The h2 input and span tag are taken inside the id to define the complete structure of the form.
We know about the style of the css of the registration form. Like us, we have zeroed the margin and padding this time, followed by background-position by giving the background tag to the body tag, followed by the background color and width of the class regform. The watch is set
This form is not designed in the @ media screen, you can respond to this form by designing it in the @ media screen, so that you can view this form easily in the mobile tab. If you know JavaScript, you can use this form in your blog or website.
If you are having difficulties in understanding this registration form, then you can understand it by watching the video of this form, which we have given below.
Video Tutorial of Registration Form Design Using Html And CSS
I hope you have understood by watching the video tutorial and have also learned to write the code. If you want to get the source code of this registration form, then we have given two files, one html code file and the other CSS code file, both 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 CODE FILE :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Form</title>
<link rel="stylesheet" href="style.css">
</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>
CSS CODE FILE :
* {
margin: 0;
padding: 0;
}
body {
background: rgb(20, 117, 188);
background: linear-gradient(90deg, rgba(20, 117, 188, 1) 0%, rgba(237, 50, 68, 1) 78%);
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;
}
#name {
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;
}
#coustomer {
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;
}
hi
ReplyDeletecan you help me on my website?
ReplyDeleteVery helpful, thanks.
ReplyDeletePost a Comment