Creating login and registration forms is important for websites and apps. In this tutorial, we’ll show you how to make a good-looking and easy-to-use login and registration form using HTML, CSS, and JavaScript. By the end, you’ll know how to create a stylish form that makes users happy.In the digital world, how your website or app looks is crucial for getting and keeping users. Your login form is often the very first thing users see. In this tutorial, we’ll guide you through making a modern and good-looking login form for your website or app using HTML and CSS. When you finish, you’ll know how to design a sleek and user-friendly login form that makes your site or app look great and work well.
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 it should be well designed
Step 1: HTML Structure for the UI Login 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 UI Login 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.
So a login form should be well designed. To make this login form we are going to start by. Creating a HTML File and add the following codes.
HTML 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="style.css">
<title>Login | Ludiflex</title>
</head>
<body>
<div class="login-box">
<div class="login-header">
<header>Login</header>
</div>
<div class="input-box">
<input type="text" class="input-field" placeholder="Email" autocomplete="off" required>
</div>
<div class="input-box">
<input type="password" class="input-field" placeholder="Password" autocomplete="off" required>
</div>
<div class="forgot">
<section>
<input type="checkbox" id="check">
<label for="check">Remember me</label>
</section>
<section>
<a href="#">Forgot password</a>
</section>
</div>
<div class="input-submit">
<button class="submit-btn" id="submit"></button>
<label for="submit">Sign In</label>
</div>
<div class="sign-up-link">
<p>Don't have account? <a href="#">Sign Up</a></p>
</div>
</div>
</body>
</html>
CSS Codes
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins',sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #dfdfdf;
}
.login-box{
display: flex;
justify-content: center;
flex-direction: column;
width: 440px;
height: 480px;
padding: 30px;
}
.login-header{
text-align: center;
margin: 20px 0 40px 0;
}
.login-header header{
color: #333;
font-size: 30px;
font-weight: 600;
}
.input-box .input-field{
width: 100%;
height: 60px;
font-size: 17px;
padding: 0 25px;
margin-bottom: 15px;
border-radius: 30px;
border: none;
box-shadow: 0px 5px 10px 1px rgba(0,0,0, 0.05);
outline: none;
transition: .3s;
}
::placeholder{
font-weight: 500;
color: #222;
}
.input-field:focus{
width: 105%;
}
.forgot{
display: flex;
justify-content: space-between;
margin-bottom: 40px;
}
section{
display: flex;
align-items: center;
font-size: 14px;
color: #555;
}
#check{
margin-right: 10px;
}
a{
text-decoration: none;
}
a:hover{
text-decoration: underline;
}
section a{
color: #555;
}
.input-submit{
position: relative;
}
.submit-btn{
width: 100%;
height: 60px;
background: #222;
border: none;
border-radius: 30px;
cursor: pointer;
transition: .3s;
}
.input-submit label{
position: absolute;
top: 45%;
left: 50%;
color: #fff;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
cursor: pointer;
}
.submit-btn:hover{
background: #000;
transform: scale(1.05,1);
}
.sign-up-link{
text-align: center;
font-size: 15px;
margin-top: 20px;
}
.sign-up-link a{
color: #000;
font-weight: 600;
}
Think it was understandable. If you have any problem, leave a comment.
I will be pleased to help.
