Create login and registration page using HTML and JavaScript. In this Java Script example, let’s create a simple web application to design and perform login and registration using HTML, CSS, and JS.
Problem statement
In this task, we have to create simple login and registration page using JS function, HTML, CSS. For that create an HTML file and use the js function that displays the output.
Steps to create login and registration page using JS
Create HTML file
Use CSS to Create two class title login and title register
Create login register buttons and submit buttons using html
In javascript to declare variables use const and use document. queryselector() that returns the first element within the document that matches the specified selector. const loginText = document.querySelector(“.title-text .login”);
Use signupBtn.onclick event executes a certain functionality when a button is clicked
Add margins to the login button use loginForm.style.marginLeft = “-50%”; loginText.style.marginLeft = “-50%”;
Use onclick buttons for login and register and add margin to that buttons .
JS code for login and registration page using HTML and CSS
Login and Registration Form in HTML CSS and JavaScript
Hello friend I hope you are doing awesome. Today here we will learn to create a Responsive Login and Registration Form in HTML CSS and JavaScript. You can also check out the 16 Free Login & Registration Forms that I have created to date. But this project has several facilities and features.
The login form is the section on the webpage where users need to fill required details to enter the particular website or webpage. Same as the Registration form is the section with a combination of input fields where users need to fill in details to create a login id and password.
Let’s have a quick look at the given image of our project [Login and Registration Form]. On the left side, we can see a login form with some input fields, buttons,s, and text with links, similarly, on the right side, we can see a registration form. Actually, at first, there will be one form which is the login form and when we click on the signup now button the login form will disappear and the registration form will appear.
Now we are going to watch the real demo of this project [Login and Registration Form], and all the animation that I have included in this template. Also by watching the video tutorial, we will get an idea, of how all HTML CSS and JavaScript code works properly behind this beautiful form design.
Login & Registration Form in HTML CSS JavaScript
I have provided all the HTML CSS and JavaScript code that I have used to create this beautiful Login and Registration Form, before Jumping into the source code file, you need to know some important points outs of this video tutorial.
As you have seen on the video tutorial of this Login and Registration Form. We saw only on the login form on the screen with the login title some input filed with beautiful focus animation and a button and some text and nav links and also we have seen password hide and show eye toggle button. When I clicked on the signup now link sign-up button disappear and the registration form appeared with a beautiful sliding animation.
Similarly, on the registration form, we have seen a title, an input field, a button, and some text with nav links. Again when I clicked on the Login now link, the registration form disappear and the login form appear.
For the UI design I have used only HTM and CSS and to toggle the Login and Registration Form and Password Show Hide feature I have used Some JavaScript code. If you want this type of Login and Registration Form in HTM and CSS Only then you can click the link.
I believe, now you can easily create this login form, if you are feeling difficulty, I have provided all the HTML CSS, and JavaScript code that I have used to create this Login and Registration Form below:
You Might Like This:
Login and Registration Form [Source Code]
To take the source code of this Login and Registration Form Template first, you need to create two files: an HTML file and a CSS file. After creating these two files then you can copy-paste the following source code. You can also directly download all source codes of this Login and Registration Form by clicking on the given download button.
If you face any difficulties while creating your Login and Registration Form or your code is not working as expected, you can download the source code files for this Login and Registration Page for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.
JavaScript Form Validation With Limit Login Attempts
Login form plays a key role in website development, which authenticate user access to other resources.
Here, we are giving our JavaScript codes for validating Login form. In our example, we have a login form with two input fields i.e. username and password, As user clicks on login button, JavaScript validation function comes into act.
Moreover, we allowed three attempts for user to login, after third attempt all fields get disabled.
var attempt = 3; //Variable to count number of attempts . attempt --; //Decrementing by one . document.getElementById("username").disabled = true; document.getElementById("password").disabled = true; document.getElementById("submit").disabled = true; return false; > > >
Below is our complete code with download and live demo option
HTML File: javascript_login.html
Here, we have created a simple HTML form with some fields, as user clicks submit button JavaScript code will execute.
Javascript Login Form Validation
Note : For this demo use following username and password. User Name : Formget Password : formget#123
Javascript File: login.js
Given below is our complete JavaScript code.
var attempt = 3; // Variable to count number of attempts. // Below function Executes on click of login button. function validate() < var username = document.getElementById("username").value; var password = document.getElementById("password").value; if ( username == "Formget" && password == "formget#123")< alert ("Login successfully"); window.location = "success.html"; // Redirecting to other page. return false; >else < attempt --;// Decrementing by one. alert("You have left "+attempt+" attempt;"); // Disabling fields after 3 attempts. if( attempt == 0)< document.getElementById("username").disabled = true; document.getElementById("password").disabled = true; document.getElementById("submit").disabled = true; return false; >> >
Hence, we have applied JavaScript validation on login form, you can also use database to verify user. Hope you like it, keep reading our other blogs in future.
JavaScript Form Validation With Limit Login Attempts
Login form plays a key role in website development, which authenticate user access to other resources.
Here, we are giving our JavaScript codes for validating Login form. In our example, we have a login form with two input fields i.e. username and password, As user clicks on login button, JavaScript validation function comes into act.
Moreover, we allowed three attempts for user to login, after third attempt all fields get disabled.
var attempt = 3; //Variable to count number of attempts . attempt --; //Decrementing by one . document.getElementById("username").disabled = true; document.getElementById("password").disabled = true; document.getElementById("submit").disabled = true; return false; > > >
Below is our complete code with download and live demo option
HTML File: javascript_login.html
Here, we have created a simple HTML form with some fields, as user clicks submit button JavaScript code will execute.
Javascript Login Form Validation
Note : For this demo use following username and password. User Name : Formget Password : formget#123
Javascript File: login.js
Given below is our complete JavaScript code.
var attempt = 3; // Variable to count number of attempts. // Below function Executes on click of login button. function validate() < var username = document.getElementById("username").value; var password = document.getElementById("password").value; if ( username == "Formget" && password == "formget#123")< alert ("Login successfully"); window.location = "success.html"; // Redirecting to other page. return false; >else < attempt --;// Decrementing by one. alert("You have left "+attempt+" attempt;"); // Disabling fields after 3 attempts. if( attempt == 0)< document.getElementById("username").disabled = true; document.getElementById("password").disabled = true; document.getElementById("submit").disabled = true; return false; >> >
Hence, we have applied JavaScript validation on login form, you can also use database to verify user. Hope you like it, keep reading our other blogs in future.
