.jpg "Registration form using html and css with source code")
In this article, we will learn about how to create Registration form using html and css with source code. Now, Creating Registration form using html and css becomes more simple with the given tutorial, which provides a simple step-by-step process to design Registration form using html and css. So, let's go and follow the steps carefully.
Registration form is a crucial part which plays role to collect the personal information from the user. this is a best way to collect the user data for registration. When user fill the registration form, then that helps him to register his information to use the particular service. So, Designing the registration form is the crucial part for any website or app. Here, we've given a complete registration form to help you to create a responsive design with source code.
Steps to create Registration form using html and css
Here are the Steps to create Registration form using html and css as given below :-
1) Creating File on VS CODE :
2) Adding HTML code :
Add the .html file in the project folder and give it the name as - index.html.
3) Copy and Paste HTML code :
copy the following code and paste it in index.html file.
<!DOCTYPE html>
<html>
<head>
<title>Registration Form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="registration-form">
<h1>Registration-Form</h1>
<form action="#" method="post">
<p>Full Name:</p>
<input type="text" name="fullname" placeholder="Full Name">
<p>User Name:</p>
<input type="text" name="username" placeholder="User Name">
<p>Email</p>
<input type="email" name="email" placeholder="Email">
<p>Password:</p>
<input type="password" name="password" placeholder="Password">
<button type="submit">Registration</button>
</form>
</div>
</body>
</html>
4) Adding CSS code :
Add the .css file in the project folder and give it the name as - style.css.
5) Copy and Paste CSS code :
copy the following code and paste it in style.css file.
* {
padding: 0;
margin: 0;
font-family: sans-serif;
}
body {
background: url('./bg.jpg') no-repeat;
background-size: cover;
color: #fff;
}
.registration-form {
position: absoulte;
top: 50%;
margin:auto;
width: 350px;
}
.registration-form h1 {
font-size: 40px;
text-align: center;
text-transform: uppercase;
margin: 40px 0;
}
.registration-form p {
font-size: 20px;
margin: 15px 0;
}
.registration-form input {
font-size: 16px;
padding: 15px 10px;
width: 100%;
border: 0;
border-radius: 5px;
outline: name;
}
.registration-form button {
font-size: 18px;
font-weight: bold;
margin: 20px 0;
padding: 10px 15px;
width: 50%;
border: 0;
border-radius: 5px;
background-color: #fff;
}
.registration-form button:hover {
color: red;
}
6) Add background image :
You've to add background image as shown in output for more attractive design. you can use the image randomly as you want, but if you need the perfect image then click here to download image -