Create login registration form using html css and js
we will see how to create the Responsive Login & Registration Form using HTML CSS & JavaScript, along with understanding its implementation through the illustration.
The combination of a registration form and a login form is fundamental for implementing user authentication, where users can create accounts to access personalized content, save preferences, and perform actions that require identity verification.
Registration Form:
- Purpose: The registration form is used to collect information from users who are new to a website or application and want to create an account.
- Typical Fields:
- Username or Full Name
- Email Address
- Password
- Confirm Password (to ensure accuracy)
Login Form:
- Purpose: The login form is used by users who have already registered to the website or application. It allows them to enter their credentials to access their account.
- Typical Fields:
- Email Address or Username
- Password
Create index.html file
<html>
<body>
<head>
<title>
Design Login & Registration Form using HTML CSS & JavaScript
</title>
<link rel="stylesheet" href="style.css">
</head>
<section>
<div class="container">
<div class="login-reg">
<h2>Login Form</h2>
<form>
<label for="email">Email</label>
<input type="text" class="form-control" id="email" placeholder="Enter your email">
<label for="password">Password</label>
<input type="password" class="form-control" id="password" placeholder="Enter your password">
<button type="submit">Login</button>
</form>
<div class="switch">Don't have an account? <a href="#" onclick="switchCard()">Register here</a></div>
</div>
<div class="login-reg display">
<h2>Register Form</h2>
<form>
<label for="fullname">Full Name</label>
<input type="text" class="form-control" id="fullname" placeholder="Enter your full name">
<label for="email">Email</label>
<input type="email" class="form-control" id="email" placeholder="Enter your email">
<label for="phone">Phone</label>
<input type="email" class="form-control" id="phone" placeholder="Enter your phone">
<label for="new-password">Password</label>
<input type="password" class="form-control" id="password" placeholder="Enter your new password">
<label for="new-password">Confirm Password</label>
<input type="password" class="form-control" id="c-password" placeholder="Enter your new password">
<button type="submit">Register</button>
</form>
<div class="switch">Already have an account? <a href="#" onclick="switchCard()">Login here</a></div>
</div>
</div>
</section>
<script src="script.js"></script>
</body>
</html>Create style.css file
body {
font-family: 'Times New Roman', Times, serif;
margin: 0;
padding: 0;
}
.login-reg.display {
display: none;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #008fff21;
}
.login-reg {
width: 400px;
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
border: 2px solid #007bff;
}
h2 {
color: #007BFF;
margin-bottom: 20px;
}
form {
display: flex;
flex-direction: column;
}
label {
text-align: left;
margin-bottom: 5px;
}
.form-control:focus {
border-color: #007bff;
outline: 0;
border: 2px solid #007bff !important;
}
input {
padding: 10px;
margin-bottom: 10px;
border: 2px solid #e5e7e9;
border-radius: 5px;
}
button {
padding: 10px;
background-color: #007BFF;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
.switch {
margin-top: 15px;
font-size: 14px;
}
.switch a {
color: #007BFF;
text-decoration: none;
}Create Script.js file
function switchCard() {
const loginCard = document.querySelector('.container .login-reg:nth-child(1)');
const registerCard = document.querySelector('.container .login-reg:nth-child(2)');
if (loginCard.style.display === 'none') {
loginCard.style.display = 'block';
registerCard.style.display = 'none';
} else {
loginCard.style.display = 'none';
registerCard.style.display = 'block';
}
}The registration process typically involves creating a new user account by storing the user’s information in a database. On the other hand, the login process involves verifying the entered credentials against the stored information to grant access to the user.
Security is a crucial consideration when implementing login and registration forms. Best practices include using secure password storage methods (such as hashing), implementing account lockout mechanisms after multiple failed login attempts, and ensuring secure communication (e.g., HTTPS) when transmitting sensitive information.
