In this tutorial, you will learn how to make an interactive login and registration form using HTML, CSS and JavaScript with a beautiful blur effect. We will use HTML to create the structure of the form, CSS to style the elements and add animations, and JavaScript to add the functionality to switch between Login and Register form.
You will also learn how to use some advanced CSS features such as transitions, transforms and keyframes to create good animations on the images.
What is the Login form?
A Login form is a user interface element typically found on websites or applications which used to enter authentication credentials to access a restricted page or the website as well. The login form contains a field for the username or email and another for the password.
What is the Registration form?
A registration form is a user interface element commonly found on websites and applications that allows individuals to create new accounts or profiles. It collects information from users to establish a unique identity within the system.
By the end of this tutorial, you will have a fully animated and responsive login and registration form that you can use for your own projects or websites.
Requirements:
- A computer
- A text editor (Example: VS Code, Sublime Text Editor…)
- Simple understanding about HTML, CSS and JavaScript.
Steps For Creating This Login and Registration Form
1. Creating HTML Structure
Firstly, You will need to create a container division that will hold the form elements, such as inputs, buttons, labels, and links. We will also need to create two separate forms, So there will be one for login and one for registration. The division that we hold all those forms (i.e Login and Register) will allow us to switch between them. After adding HTML codes as it shown in the video tutorial, We will start styling it with CSS.
2. Styling With CSS
As we have create HTML, we will need to use CSS to design elements as we want. We will use CSS to add colors, fonts, backgrounds, shadows, and other effects make it look good. We will also use CSS to position and align the elements using CSS flexbox, and other positioning techniques.
After designing the form, we will need to add functionality for switching between login and register form using JavaScript.
3. Adding JavaScript
We will use JavaScript to add some logic and functionality to the form, such as toggling the active button and switching between the login and registration forms. We will do that adding some event listeners to the form elements, In this case we will use click event listener and to execute functions based on what you want.
HTML Codes Starting Point
As it is mentioned above we create HTML file before in order to make this form. So you will add the following codes as the starting point.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ludiflex | Login & Register</title>
<!-- BOXICONS -->
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
<!-- STYLE -->
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<!-- Form Container -->
<!-- Login Form Container -->
<!-- Register Form Container -->
<!-- JS -->
<script src="assets/js/main.js"></script>
</body>
</html>
CSS Codes Starting Point
/* POPPINS FONT */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
/* ====== BASE ===== */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
/* ====== Body ===== */
/* ====== Form container ===== */
/* ====== First Column ===== */
/* ====== Form Image Animation ===== */
/* ====== Featured Words ===== */
/* ====== Second Column ===== */
/* ======= Login Form ======== */
/* ======= Register Form ======== */
/* ======== Responsive ======== */
JavaScript Starting Point
// Variable Declaration
const loginBtn = document.querySelector("#login");
const registerBtn = document.querySelector("#register");
const loginForm = document.querySelector(".login-form");
const registerForm = document.querySelector(".register-form");
// Login button function
// Register button function
If you encounter any problems while creating your website with forms, you can download the source code files for this project for free by clicking the Download button.
- Buy Me a Coffee: https://www.buymeacoffee.com/ludiflex/e/214149
- Ko-Fi: https://ko-fi.com/s/964b4302ca
