Hello friend, you will learn to create registration form with the help of html and CSS. Which you will learn to create a simple registration form by teaching. This registration form is designed for design only, it has no function. If you are learning html or CSS and you are learning to create a registration form then it will be very beneficial for you.
We have shared many registration forms before that by clicking on this link you can see and read which you can easily understand.
You must know what is the registration form, where it is said to be used, then you know what is the registration form. A registration form is a list of areas that a user can input data and submit to a company or a person. Companies serve customers. And for other tasks, use the registration form to signup the planets, which you will learn to create through html and CSS.
You can see in this image this is a registration form which is created only from html and CSS, this registration form is created as a design, it does not work, this registration form is created from the form tag of html Within which an input field and checkbox is created from the input tag and a submit button is created from the submit tag of the input. All these tags are designed by designing in CSS like this.
You can understand the design of this registration form by watching the video, if you are having difficulties in understanding, then the following video is given, which can be clicked to watch the tutorial.
Video Tutorial of registration form design html and CSS
I hope you understand by watching the video tutorial. And after seeing the code of this, you will have understood how it has been written which will make you easier to understand.
Registration Form Design Html And CSS Source Codes
First of all let us know about the html code of this registration form form. We have first taken a div under of the body tag whose class name is wrapper, another div inside this wrapper is named main and the name of this main class under took two more div whose class name is head and form has taken p tag inside the class head inside which the title of the form is written
A form tag is taken inside the class form which is method = "POST". Method post means that when we give our details inside a form, it is not shown in the address of the browser and when you get the method If it is shown in the search link of the browser, then inside the form, we write the method in post.
Inside the form tag, we have taken the 12 p tag in which inside the first p tag we have written the name of the input field and inside the second tag the input tag is written inside which the type text and placeholder name is written and under this input one The class name is also given, whose name is name-inp, on which the input field name and the type and class name of the input tag is given, which is written first name and last name and the tag of the input field below it.
Now know about the style of css of this form, we have zeroed the margin and padding to the form page and after that the class wrapper has been given width and height size and its background image has been given to cover and repeat the background-size. Is no-repeat
And after this class, the class name main is also given the width and height size of the background-color border-radius and margin. Similarly, the class name name-inp is designed by giving width height margin padding font-size color border and background color property. has been done
This form is not designed in responsive. To design this responsive, by using @media screen, giving the size of different devices according to that device, you can easily see this form in all devices. If you have complete knowledge of JavaScript or Python, then if you want to use this form in your blog or website, you can do this
If you want to get the code of this registration form, then you can easily get it. We have given below two code files, one html and the other css file, copy both these files and paste them in the 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>form</title>
<link href="form.css" rel="stylesheet">
</head>
<body>
<div class="warpper fl">
<div class="main">
<div class="head">
<p>
Student Registration Form</p>
</div>
<div class="form fl">
<form method="POST">
<p class="name">
FIRST NAME* :</p>
<p>
<input type="text" name="fname" placeholder="First Name" class="name-inp">
</p>
<p class="name">
LAST NAME* :</p>
<p>
<input type="text" name="lname" placeholder="Last Name" class="name-inp">
</P>
<p class="name">
EMAIL* :</p>
<p>
<input type="email" name="uid" placeholder="Email" class="name-inp">
</p>
<p class="name">
PHONE* :</P>
<p>
<input type="text" name="phone" placeholder="Phone" class="name-inp">
</p>
<p class="name">
PASSWORD* :</p>
<p>
<input type="password" name="pass" placeholder="Password" class="pass">
<input type="password" name="pass" placeholder="Conform Password" class="pass">
</p>
<p class="gender">
<span class="gen">Gender</span>
<input type="checkbox" name="ge" class="genm">Male
<input type="checkbox" name="ge" class="genm">Female
</p>
<p>
<input type="submit" name="sb" value="SUBMIT" class="sub">
</p>
</form>
</div>
</div>
</div>
</body>
</html>
CSS CODE FILE :
*{
margin: 0;
padding: 0;
}
.fl{
float: left;
}
.warpper{
width: 100%;
height: 100vh;
background-image: url("image/a3.png");
background-repeat: no-repeat;
background-size: cover;
}
.main{
width: 30%;
height: 550px;
background-color: rgba(7, 47, 79, 0.63);
margin: 50px 35%;
border-radius: 20px 20px 30px 30px;
}
.head{
width: 100%;
background-color: #f8B800;
height: 40px;
border-radius: 20px 20px 0 0;
}
.head p{
line-height: 40px;
text-align: center;
font-size: 25px;
font-weight: bold;
color: #fff;
}
.form{
width: 100%;
height: 500px;
}
.name{
font-size: 16px;
color: #fff;
margin: 15px 0 0 5%;
}
.name-inp{
width: 90%;
height: 30px;
margin: 5px 0 0 5%;
font-size: 16px;
padding: 2px;
color: rgb(114, 111, 111);
border: 1px solid rgb(17, 67, 107);
background-color: rgb(231, 232, 250);
}
.name-inp:hover{
background-color: rgb(0, 23, 41);
color: rgb(173, 167, 167);
border: 1px solid rgb(139, 139, 139);
}
.pass{
margin: 5px 0 0 5%;
height: 30px;
width: 41%;
padding: 2px;
background-color: rgb(231, 232, 250);
border: 1px solid rgb(17, 67, 107);
}
.pass:hover{
background-color: rgb(0, 23, 41);
color: rgb(173, 167, 167);
border: 1px solid rgb(139, 139, 139);
}
.gender{
margin: 15px 0 0 5%;
color: #fff;
font-size: 16px;
}
.gen{
font-size: 18px;
}
.genm{
margin-left: 5%;
}
.sub{
width: 90%;
margin: 15px 0 0 5%;
font-size: 16px;
height: 40px;
background-color: #031c30;
border: 1px solid rgb(17, 67, 107);
color: #fff;
}
.sub:hover{
background-color: #E94601;
color: #fff;
}
Post a Comment