Learn How to Build a Website with a Stylish Login and Registration Form using HTML, CSS, and JavaScript. This tutorial will take you through the process of creating a website that includes a modern, user-friendly login and registration form. By the end, you’ll have the skills to make your website stand out and engage your visitors effectively. From this page a user can choose to login or register without going on another page.
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.
Step 1: HTML Structure for the Login & Register Form
Here, you’ll learn how to create the fundamental HTML structure for the login form. We’ll cover setting up the form container, adding input fields for username and password, and integrating a submit button.
Step 2: CSS Styling for this Login & Register form
This segment is the core of the tutorial. We’ll delve into the CSS styling of the login form. You’ll gain expertise in defining the form’s layout, enhancing the appearance of input fields, crafting a captivating submit button, and introducing subtle animation effects to engage your users.
Step 3: Adding Interactivity with JavaScript
Here JavaScript will be used inorder to make buttons work.
Step 4: Ensuring Responsiveness
This part of the tutorial focuses on making your login form responsive. We’ll employ CSS media queries to guarantee that the form adapts seamlessly to various screen sizes, including desktops and mobile devices.
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 href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
<link rel="stylesheet" href="style.css">
<title>Ludiflex | Login & Registration</title>
</head>
<body>
<div class="wrapper">
<nav class="nav">
<div class="nav-logo">
<p>LOGO .</p>
</div>
<div class="nav-menu" id="navMenu">
<ul>
<li><a href="#" class="link active">Home</a></li>
<li><a href="#" class="link">Blog</a></li>
<li><a href="#" class="link">Services</a></li>
<li><a href="#" class="link">About</a></li>
</ul>
</div>
<div class="nav-button">
<button class="btn white-btn" id="loginBtn" onclick="login()">Sign In</button>
<button class="btn" id="registerBtn" onclick="register()">Sign Up</button>
</div>
<div class="nav-menu-btn">
<i class="bx bx-menu" onclick="myMenuFunction()"></i>
</div>
</nav>
<!----------------------------- Form box ----------------------------------->
<div class="form-box">
<!------------------- login form -------------------------->
<div class="login-container" id="login">
<div class="top">
<span>Don't have an account? <a href="#" onclick="register()">Sign Up</a></span>
<header>Login</header>
</div>
<div class="input-box">
<input type="text" class="input-field" placeholder="Username or Email">
<i class="bx bx-user"></i>
</div>
<div class="input-box">
<input type="password" class="input-field" placeholder="Password">
<i class="bx bx-lock-alt"></i>
</div>
<div class="input-box">
<input type="submit" class="submit" value="Sign In">
</div>
<div class="two-col">
<div class="one">
<input type="checkbox" id="login-check">
<label for="login-check"> Remember Me</label>
</div>
<div class="two">
<label><a href="#">Forgot password?</a></label>
</div>
</div>
</div>
<!------------------- registration form -------------------------->
<div class="register-container" id="register">
<div class="top">
<span>Have an account? <a href="#" onclick="login()">Login</a></span>
<header>Sign Up</header>
</div>
<div class="two-forms">
<div class="input-box">
<input type="text" class="input-field" placeholder="Firstname">
<i class="bx bx-user"></i>
</div>
<div class="input-box">
<input type="text" class="input-field" placeholder="Lastname">
<i class="bx bx-user"></i>
</div>
</div>
<div class="input-box">
<input type="text" class="input-field" placeholder="Email">
<i class="bx bx-envelope"></i>
</div>
<div class="input-box">
<input type="password" class="input-field" placeholder="Password">
<i class="bx bx-lock-alt"></i>
</div>
<div class="input-box">
<input type="submit" class="submit" value="Register">
</div>
<div class="two-col">
<div class="one">
<input type="checkbox" id="register-check">
<label for="register-check"> Remember Me</label>
</div>
<div class="two">
<label><a href="#">Terms & conditions</a></label>
</div>
</div>
</div>
</div>
</div>
<script>
function myMenuFunction() {
var i = document.getElementById("navMenu");
if(i.className === "nav-menu") {
i.className += " responsive";
} else {
i.className = "nav-menu";
}
}
</script>
<script>
var a = document.getElementById("loginBtn");
var b = document.getElementById("registerBtn");
var x = document.getElementById("login");
var y = document.getElementById("register");
function login() {
x.style.left = "4px";
y.style.right = "-520px";
a.className += " white-btn";
b.className = "btn";
x.style.opacity = 1;
y.style.opacity = 0;
}
function register() {
x.style.left = "-510px";
y.style.right = "5px";
a.className = "btn";
b.className += " white-btn";
x.style.opacity = 0;
y.style.opacity = 1;
}
</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: url("images/1.jpg");
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
overflow: hidden;
}
.wrapper{
display: flex;
justify-content: center;
align-items: center;
min-height: 110vh;
background: rgba(39, 39, 39, 0.4);
}
.nav{
position: fixed;
top: 0;
display: flex;
justify-content: space-around;
width: 100%;
height: 100px;
line-height: 100px;
background: linear-gradient(rgba(39,39,39, 0.6), transparent);
z-index: 100;
}
.nav-logo p{
color: white;
font-size: 25px;
font-weight: 600;
}
.nav-menu ul{
display: flex;
}
.nav-menu ul li{
list-style-type: none;
}
.nav-menu ul li .link{
text-decoration: none;
font-weight: 500;
color: #fff;
padding-bottom: 15px;
margin: 0 25px;
}
.link:hover, .active{
border-bottom: 2px solid #fff;
}
.nav-button .btn{
width: 130px;
height: 40px;
font-weight: 500;
background: rgba(255, 255, 255, 0.4);
border: none;
border-radius: 30px;
cursor: pointer;
transition: .3s ease;
}
.btn:hover{
background: rgba(255, 255, 255, 0.3);
}
#registerBtn{
margin-left: 15px;
}
.btn.white-btn{
background: rgba(255, 255, 255, 0.7);
}
.btn.btn.white-btn:hover{
background: rgba(255, 255, 255, 0.5);
}
.nav-menu-btn{
display: none;
}
.form-box{
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 512px;
height: 420px;
overflow: hidden;
z-index: 2;
}
.login-container{
position: absolute;
left: 4px;
width: 500px;
display: flex;
flex-direction: column;
transition: .5s ease-in-out;
}
.register-container{
position: absolute;
right: -520px;
width: 500px;
display: flex;
flex-direction: column;
transition: .5s ease-in-out;
}
.top span{
color: #fff;
font-size: small;
padding: 10px 0;
display: flex;
justify-content: center;
}
.top span a{
font-weight: 500;
color: #fff;
margin-left: 5px;
}
header{
color: #fff;
font-size: 30px;
text-align: center;
padding: 10px 0 30px 0;
}
.two-forms{
display: flex;
gap: 10px;
}
.input-field{
font-size: 15px;
background: rgba(255, 255, 255, 0.2);
color: #fff;
height: 50px;
width: 100%;
padding: 0 10px 0 45px;
border: none;
border-radius: 30px;
outline: none;
transition: .2s ease;
}
.input-field:hover, .input-field:focus{
background: rgba(255, 255, 255, 0.25);
}
::-webkit-input-placeholder{
color: #fff;
}
.input-box i{
position: relative;
top: -35px;
left: 17px;
color: #fff;
}
.submit{
font-size: 15px;
font-weight: 500;
color: black;
height: 45px;
width: 100%;
border: none;
border-radius: 30px;
outline: none;
background: rgba(255, 255, 255, 0.7);
cursor: pointer;
transition: .3s ease-in-out;
}
.submit:hover{
background: rgba(255, 255, 255, 0.5);
box-shadow: 1px 5px 7px 1px rgba(0, 0, 0, 0.2);
}
.two-col{
display: flex;
justify-content: space-between;
color: #fff;
font-size: small;
margin-top: 10px;
}
.two-col .one{
display: flex;
gap: 5px;
}
.two label a{
text-decoration: none;
color: #fff;
}
.two label a:hover{
text-decoration: underline;
}
@media only screen and (max-width: 786px){
.nav-button{
display: none;
}
.nav-menu.responsive{
top: 100px;
}
.nav-menu{
position: absolute;
top: -800px;
display: flex;
justify-content: center;
background: rgba(255, 255, 255, 0.2);
width: 100%;
height: 90vh;
backdrop-filter: blur(20px);
transition: .3s;
}
.nav-menu ul{
flex-direction: column;
text-align: center;
}
.nav-menu-btn{
display: block;
}
.nav-menu-btn i{
font-size: 25px;
color: #fff;
padding: 10px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
cursor: pointer;
transition: .3s;
}
.nav-menu-btn i:hover{
background: rgba(255, 255, 255, 0.15);
}
}
@media only screen and (max-width: 540px) {
.wrapper{
min-height: 100vh;
}
.form-box{
width: 100%;
height: 500px;
}
.register-container, .login-container{
width: 100%;
padding: 0 20px;
}
.register-container .two-forms{
flex-direction: column;
gap: 0;
}
}
Think it was understandable. If you have any problem, leave a comment.
I will be pleased to help.
Download Assets Files from the link below
11 Comments
bro ur vids r the best ♥
Bonjour,
ou met-on son adresse mail dans la feuille de code HTML ou CSS pour recevoir les mails
ne faut-il pas une feuille code PHP
merci j’aime votre travail 🙂
This site was… how do you say it? Relevant!! Finally I have found something
that helped me. Thanks!
Thank You
Hi, after reading this awesome post i am too glad to share my know-how here with mates.
What help do you use?
I don’t get what you try to mean!
Shalom Sir,
I was wondering if you could help me take off the nav bar and maybe place the Sign In and Sign Up Buttons in the middle on the top. And Also Can you help me place a link to my logo in the script?
Yes, I can But in which script are talking about?
Great weblog right here! Additionally your site a
lot up fast! What web host are you using? Can I am getting your affiliate link
to your host? I want my web site loaded up as fast as yours lol
Affiliate Link
Use that link please.
http://namecheap.pxf.io/q4LEGn