In the fast-moving world of the internet, having a good login and registration form is really important for websites and apps. This tutorial will guide you through making a modern and good-looking form for logging in and signing up using HTML, CSS, and JavaScript. When you finish this tutorial, you’ll know how to make a form that works well and looks great on your website or app.
Login forms are used in most of website and Application. The login form helps the user to get access to website or web application they are browsing. (To access their data)
So a login form should be well designed.
Steps:
- Setting Up the Project: Set up the initial project structure and files.
- Creating the Form with HTML: Create the basic structure for login and registration forms.
- Styling with CSS: Discuss using CSS to make your form look good and work on different devices.
- Adding Functionality with JavaScript: Explore adding interactivity and features to your form with JavaScript.
To make this login form we are going to start by. Creating a HTML File and add the following codes.
HTML & JavaScript codes
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css">
<title>Login</title>
</head>
<body>
<div class="container">
<div class="box">
<div class="box-login" id="login">
<div class="top-header">
<h3>Hello, Again!</h3>
<small>We are happy to have you back.</small>
</div>
<div class="input-group">
<div class="input-field">
<input type="text" class="input-box" id="logEmail" required>
<label for="logEmail">Email address</label>
</div>
<div class="input-field">
<input type="password" class="input-box" id="logPassword" required>
<label for="logPassword">Password</label>
<div class="eye-area">
<div class="eye-box" onclick="myLogPassword()">
<i class="fa-regular fa-eye" id="eye"></i>
<i class="fa-regular fa-eye-slash" id="eye-slash"></i>
</div>
</div>
</div>
<div class="remember">
<input type="checkbox" id="formCheck" class="check">
<label for="formCheck">Remember Me</label>
</div>
<div class="input-field">
<input type="submit" class="input-submit" value="Sign In" required>
</div>
<div class="forgot">
<a href="#">Forgot password?</a>
</div>
</div>
</div>
<!---------------------------- register --------------------------------------->
<div class="box-register" id="register">
<div class="top-header">
<h3>Sign Up, Now!</h3>
<small>We are happy to have you with us.</small>
</div>
<div class="input-group">
<div class="input-field">
<input type="text" class="input-box" id="regUsername" required>
<label for="regUsername">Username</label>
</div>
<div class="input-field">
<input type="text" class="input-box" id="regEmail" required>
<label for="regEmail">Email address</label>
</div>
<div class="input-field">
<input type="password" class="input-box" id="regPassword" required>
<label for="regPassword">Password</label>
<div class="eye-area">
<div class="eye-box" onclick="myRegPassword()">
<i class="fa-regular fa-eye" id="eye-2"></i>
<i class="fa-regular fa-eye-slash" id="eye-slash-2"></i>
</div>
</div>
</div>
<div class="remember">
<input type="checkbox" id="formCheck2" class="check">
<label for="formCheck2">Remember Me</label>
</div>
<div class="input-field">
<input type="submit" class="input-submit" value="Sign Up" required>
</div>
</div>
</div>
<div class="switch">
<a href="#" class="login active" onclick="login()">Login</a>
<a href="#" class="register" onclick="register()">Register</a>
<div class="btn-active" id="btn"></div>
</div>
</div>
</div>
<script>
var x = document.getElementById('login');
var y = document.getElementById('register');
var z = document.getElementById('btn');
function login(){
x.style.left = "27px";
y.style.right = "-350px";
z.style.left = "0px";
}
function register(){
x.style.left = "-350px";
y.style.right = "25px";
z.style.left = "150px";
}
// View Password codes
function myLogPassword(){
var a = document.getElementById("logPassword");
var b = document.getElementById("eye");
var c = document.getElementById("eye-slash");
if(a.type === "password"){
a.type = "text";
b.style.opacity = "0";
c.style.opacity = "1";
}else{
a.type = "password";
b.style.opacity = "1";
c.style.opacity = "0";
}
}
function myRegPassword(){
var d = document.getElementById("regPassword");
var b = document.getElementById("eye-2");
var c = document.getElementById("eye-slash-2");
if(d.type === "password"){
d.type = "text";
b.style.opacity = "0";
c.style.opacity = "1";
}else{
d.type = "password";
b.style.opacity = "1";
c.style.opacity = "0";
}
}
</script>
</body>
</html>
CSS Codes
/* POPPINS FONT */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'poppins',sans-serif;
}
body{
/* background: linear-gradient(#b8abea,#907cd4,#6c4be2); */
background: url("images/99.jpg");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
padding: 20px;
}
.container{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.box{
display: flex;
flex-direction: row;
position: relative;
padding: 60px 20px 30px 20px;
height: 620px;
width: 350px;
border-radius: 30px;
background-color: rgba(255, 220, 220, 0.406);
-webkit-backdrop-filter: blur(15px);
backdrop-filter: blur(15px);
border: 3px solid rgba(255, 255, 255, 0.2);
overflow: hidden;
}
.box-login{
position: absolute;
width: 85%;
left: 27px;
transition: .5s ease-in-out;
}
.box-register{
position: absolute;
width: 85%;
right: -350px;
transition: .5s ease-in-out;
}
.top-header{
text-align: center;
margin: 30px 0;
}
.top-header h3{
font-size: 22px;
font-weight: 600;
margin-bottom: 8px;
}
.input-group{
width: 100%;
}
.input-field{
margin: 12px 0;
position: relative;
}
.input-box{
width: 100%;
height: 50px;
font-size: 15px;
color: #040404;
border: none;
border-radius: 10px;
padding: 7px 45px 0 20px;
background: rgba(224, 223, 223, 0.6);
backdrop-filter: blur(2px);
outline: none;
}
.input-field label{
position: absolute;
left: 20px;
top: 15px;
font-size: 15px;
transition: .3s ease-in-out;
}
.input-box:focus ~ label,.input-box:valid ~ label{
top: 2px;
font-size: 10px;
color: #c12828;
font-weight: 500;
}
.remember{
display: flex;
font-size: 13px;
margin: 12px 0 30px 0;
color: #000000;
}
.check{
margin-right: 8px;
width: 14px;
}
.input-submit{
width: 100%;
height: 50px;
font-size: 15px;
font-weight: 500;
border: none;
border-radius: 10px;
background: #bc6202;
color: #fff;
box-shadow: 0px 4px 20px rgba(62, 9, 9, 0.144);
cursor: pointer;
transition: .4s;
}
.input-submit:hover{
background: #db3e00;
box-shadow: 0px 4px 20px rgba(62, 9, 9, 0.32);
}
.forgot{
text-align: center;
font-size: 13px;
font-weight: 500;
margin-top: 40px;
}
.forgot a{
text-decoration: none;
color: #000;
}
.switch{
display: flex;
position: absolute;
bottom: 50px;
left: 25px;
width: 85%;
height: 50px;
background: rgba(255, 255, 255, 0.16);
backdrop-filter: 10px;
border-radius: 10px;
box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.switch a{
display: flex;
justify-content: center;
align-items: center;
font-size: 14px;
font-weight: 500;
color: #000;
text-decoration: none;
width: 50%;
height: 50px;
border-radius: 10px;
z-index: 10;
}
#btn{
position: absolute;
bottom: 0px;
left: 0px;
width: 145px;
height: 50px;
background: #cccccd;
border-radius: 10px;
box-shadow: 2px 0px 12px rgba(0, 0, 0, 0.1);
transition: .5s ease-in-out;
}
.eye-area{
position: absolute;
top: 25px;
right: 25px;
}
.eye-box{
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
i{
position: absolute;
color: #444444;
cursor: pointer;
}
#eye,#eye-2{
opacity: 1;
}
#eye-slash,#eye-slash-2{
opacity: 0;}
@media only screen and (max-width: 576px){
.box{
margin: 0 5px;
}
#btn{
position: absolute;
width: 153px;
}
}
Think it was understandable. If you have any problem, leave a comment.
I will be pleased to help.
2 Comments
An internet connection is permanently required to load the google fonts and the icons ?
Yes It is needed but you can download them and install it on you PC