Developing a login and registration form is a easy task for developers because it is a necessary component of many online apps and Websites. Learning to generate these forms as a developer will help you become more skilled in creating and designing.
A login form is a form that allows users to submit their credentials(Name, Username, Email, Password etc.) in order to obtain access to a secure portion of a website or application. A signup form, often known as a registration form, is a type of form that allows people to register for a website or app.
Today’s article will teach you how to make a responsive Login & Registration Form in HTML & CSS. The article will cover everything from the fundamentals of designing an HTML login and signup form to styling it with CSS and adding functionality with JavaScript.
As seen in the image above, you will be presented with two forms: one for login and one for signup. I choose a color (mixture of blue and purple). It has an extremely simple, clean, and lovely design that is fully responsive.
Source Code For Login and Signup Form design using HTML & CSS :
For this login form you have to create four files, two are html files while two are css files for styling. index.html file will be login page and singup.html will be for signup. Similarly two styling files for both login.css for index.html and signup.css for signup.html.
Step One: Create a file name as index.html in root folder. extension must be .html. Copy the below code into index.html file.
<!DOCTYPE html>
<html lang="en">
<!-- By Hassan Ali | Hassanrao.com -->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Form Design | BY Hassanrao.com </title>
<link rel="stylesheet" href="login.css">
</head>
<body>
<div class="main">
<div class="form">
<h1>Welcome back!</h1>
<p>Log in to access your account.</p>
<form action="#">
<input type="email" class="input" name="email" placeholder="Enter Email" required>
<input type="password" class="input" name="newPassowrd" placeholder="Enter Your Password" required>
<input type="submit" value="Login">
</form>
<p class="login-link">Not a member? <a href="signup.html">Signup Here</a></p>
</div>
</div>
</body>
</html>
Step Two: Create a file name as signup.html in root folder. extension must be .html. Copy the below code into signup.html file.
<!DOCTYPE html>
<html lang="en">
<!-- By Hassan Ali | Hassanrao.com -->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Signup Form Design | BY Hassanrao.com </title>
<link rel="stylesheet" href="signup.css">
</head>
<body>
<div class="main">
<div class="form">
<h1>Join us today!</h1>
<p>Sign up now to become a member.</p>
<form action="#">
<input type="text" class="input" name="name" placeholder="Enter Name" required>
<input type="email" class="input" name="email" placeholder="Enter Email" required>
<input type="password" class="input" name="newPassowrd" placeholder="Choose A Password" required>
<input type="password" class="input" name="confirmPassword" placeholder="Re-Enter Password" required>
<input type="submit" value="Signup">
</form>
<p class="login-link">Already a member? <a href="index.html">Login Here</a></p>
</div>
</div>
</body>
</html>
Step Three: Now, it’s time to design both files so, Create a file name as login.css in root folder. extension must be .css. Copy the below code into login.css file.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}
.main{
width: 100%;
height: 100vh;
display: grid;
justify-content: center;
align-content: center;
background-color: #6763E7;
}
.main .form{
width: 280px;
height: auto;
display: grid;
justify-content: center;
align-content: center;
text-align: center;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0px 0px 10px #555;
}
.main .form h1{
font-size: 24px;
color: #222;
margin-bottom: 6px;
}
.main .form p{
font-size: 14px;
color: #555;
margin-bottom: 10px;
}
.main .form form input{
width: 100%;
height: 35px;
padding: 6px;
margin: 7px 0;
border: none;
outline: none;
box-shadow: 0px 0px 1px #333;
color: #555;
}
.main .form form input[type="submit"]{
background: #6763E7;
color: #fff;
font-size: 17px;
cursor: pointer;
border-radius: 4px;
margin-bottom: 20px;
transition: 0.3s all ease;
}
.main .form form input[type="submit"]:hover{
background: #524ddb;
}
.main .form p.login-link{
font-size: 13px;
}
.main .form p.login-link a{
text-decoration: none;
color: rgb(6, 95, 228);
}
Last Step: Create a file name as signup.css in root folder. extension must be .css. Copy the below code into signup.css file.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
}
.main{
width: 100%;
height: 100vh;
display: grid;
justify-content: center;
align-content: center;
background-color: #6763E7;
}
.main .form{
width: 280px;
height: auto;
display: grid;
justify-content: center;
align-content: center;
text-align: center;
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0px 0px 10px #555;
}
.main .form h1{
font-size: 24px;
color: #222;
margin-bottom: 6px;
}
.main .form p{
font-size: 14px;
color: #555;
margin-bottom: 10px;
}
.main .form form input{
width: 100%;
height: 35px;
padding: 6px;
margin: 7px 0;
border: none;
outline: none;
box-shadow: 0px 0px 1px #333;
color: #555;
}
.main .form form input[type="submit"]{
background: #6763E7;
color: #fff;
font-size: 17px;
cursor: pointer;
border-radius: 4px;
margin-bottom: 20px;
transition: 0.3s all ease;
}
.main .form form input[type="submit"]:hover{
background: #524ddb;
}
.main .form p.login-link{
font-size: 13px;
}
.main .form p.login-link a{
text-decoration: none;
color: rgb(6, 95, 228);
}
That’s all for today, If this above code doesn’t work properly then you can download source files by clicking on the button below. Have a Nice Day😀.
View This Post On Hassanrao.com for free source Files download Link.
Top comments (0)