Create Amazing Transparent Login and Sign-Up form by using HTML, CSS, and JavaScript
In this article, I will show you how to create a transparent, login & Sign-Up form for a website using HTML, CSS, and JavaScript languages.
Here I will use HTML to create the basic structure of the login and Sign-Up form, namely text box, links, buttons, and topics. Using CSS, colors, font styles, alignments, padding, and background images are added to those forms. It also uses JavaScript to validate the form, show an error message, and enter user data into the backend.
For example, if we take the human body and represent the difference between HTML, JavaScript, and CSS, it is as shown in figure 1 below.
The HTML part of the Login and Sign-Up form
This is a simple login and sign-up form. First of all, when you visit the website, you will see the login form. In this login form, places are provided for the user to enter name/email and password. After the user enters the username and password, they can access the system by clicking the Login button (thus, only users who have signed-up can log in to the system).
As mentioned above, the interface of the login form we are going to implement is as shown in figure 2 below.
Now I will first show you how to implement the HTML part related to this login form.
<!--Figure 3-->
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>Login / Sign Up Form</title>
<link rel="stylesheet" href="./src/main.css">
<script src="./src/main.js"></script>
</head>
</html>The HTML file contains the complete body structure of the form. HTML file is saved as index .html. Each HTML file starts with the <html> open tag and ends with the </html> close tag. After the <html> open tag, there is the <head> tag. In it, the CSS file and the JavaScript file are linked to the HTML file. The <link rel> tag is used to link the CSS file to the HTML file and the location of the CSS file is used in that tag. Also, the <script src> tag is used to link a JavaScript file to an HTML file, where the location of the JavaScript file is used in the tag. The <title> tag used in the <head> tag gives the web page’s title.
Figure 4 below shows the code group for the login form.
<!--Figure 4-->
<body>
<div class="container">
<form class="form" id="login">
<h1 class="form__title">Login</h1>
<div class="form__message form__message--error"></div>
<div class="form__input-group">
<input type="text" class="form__input" autofocus placeholder="Username or email">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="password" class="form__input" autofocus placeholder="Password">
<div class="form__input-error-message"></div>
</div>
<button class="form__button" type="submit">Login</button>
<p class="form__text">
<a href="#" class="form__link">Forgot your password?</a>
</p>
<p class="form__text">
<a class="form__link" href="./" id="linkCreateAccount">You Don't have an account? Create new account</a>
</p>
</form>The <body> tag starts before the </html> tag and after the </head> tag. The <body> and </body> tag contains the body that corresponds to the entire form. In the <body> tag, the <div> tag is used to divide the content of a web page. The <form> tag starts after the start of this <div> tag. This will create a complete login form. The <h2> tag used in the <form> tag adds a topic to the form. That <h2> tag ends with the </h2> tag.
The re-used <div> tag after the </h2> tag divides the contents of the login form. The <div> tag is used to divide the login form for the error messages and user inputs. The <input> element used in this <form> tag is used to extract inputs / data from the user. Here, the input type for the username is text and the input type for the password is the password. In figure 4 above, the <button> element is used to represent a clickable button. Its type is “submit”. This creates the login button in figure 2. After the </button> element I used the <p> tag. It represents the paragraph. Here the <a href> tag in the <p> tag represents the link. In figure 2 above, “Forgot your password?” And “You do not have an account? Create a new Account” link, create by <a href>. Then close the form using </form> tag.
As I mentioned above, only users who are already signing up can log in to the system using the login form. The user who has not signed up will enter the signup form through the ‘create a new account’ link shown in figure 2 above.
Let us now see the interface of the Sign -Up form. It is shown in figure 5 below.
The HTML implementation code section of the sign-up form is as follows.
<!--Figure 6-->
<form class="form form--hidden" id="createAccount">
<h1 class="form__title">Create Account</h1>
<div class="form__message form__message--error"></div>
<div class="form__input-group">
<input type="text" id="signupUsername" class="form__input" autofocus placeholder="Username">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="text" class="form__input" autofocus placeholder="Email Address">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="password" id="signupPassword" class="form__input" autofocus placeholder="Password">
<div class="form__input-error-message"></div>
</div>
<div class="form__input-group">
<input type="password" class="form__input" autofocus placeholder="Confirm password">
<div class="form__input-error-message"></div>
</div>
<button class="form__button" type="submit">Create</button>
<p class="form__text">
<a class="form__link" href="./" id="linkLogin">Already have an account? Sign in</a>
</p>
</form>
</div>
</body>The HTML implementation of the Sign-Up form shown in this figure 6 is similar to the implementation of the Login form I mentioned above. Both these forms exist in the <body> tag. After the implementation of these forms, the </body> tag is used to complete the <body> part.
CSS Part of Login and Sing-Up form
The login form in figure 2 and the sign-up form in figure 5 looks so beautiful because of the CSS implementation. CSS styles add colors, font styles, margins, transparent and background images to a website.
Let us now see how to implement CSS. We will save the CSS file to an external file type “style.css”. The following code applies to CSS implementation.
<!--Figure 7-->
body {
--color-primary: #48D1CC;
--color-primary-dark: #007f67;
--color-secondary: #00FFFF;
--color-error: #ff0000;
--color-success: #4bb544;
--border-radius: 4px;margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
background: url(./background1.jpg);
background-size: cover;
}.container {
width: 400px;
max-width: 400px;
margin: 1rem;
padding: 2rem;
box-shadow: 0 0 40px rgba(0, 0, 0, 0.7);
border-radius: var(--border-radius);
transform:translate(-5%,-5%);
}.container,
.form__input,
.form__button {
font: 500 1rem 'Quicksand', sans-serif;
}.form--hidden {
display: none;
}.form > *:first-child {
margin-top: 0;
}.form > *:last-child {
margin-bottom: 0;
}.form__title {
margin-bottom: 2rem;
text-align: center;
}.form__message {
text-align: center;
margin-bottom: 1rem;
}.form__message--success {
color: var(--color-success);
}.form__message--error {
color: var(--color-error);
}.form__input-group {
margin-bottom: 1rem;
}.form__input {
display: block;
width: 100%;
padding: 0.75rem;
box-sizing: border-box;
border-radius: var(--border-radius);
border: 1px solid #dddddd;
outline: none;
background: #eeeeee;
transition: background 0.2s, border-color 0.2s;
}.form__input:focus {
border-color: var(--color-primary);
background: #ffffff;
}.form__input--error {
color: var(--color-error);
border-color: var(--color-error);
}.form__input-error-message {
margin-top: 0.5rem;
font-size: 0.85rem;
color: var(--color-error);
}.form__button {
width: 100%;
padding: 1rem 2rem;
font-weight: bold;
font-size: 1.1rem;
color: #ffffff;
border: none;
border-radius: var(--border-radius);
outline: none;
cursor: pointer;
background: var(--color-primary);
}.form__button:hover {
background: var(--color-primary-dark);
}.form__button:active {
transform: scale(0.98);
}.form__text {
text-align: center;
}.form__link {
color: var(--color-secondary);
text-decoration: none;
cursor: pointer;
}.form__link:hover {
text-decoration: underline;
}
In the above CSS code category, you can easily identify how to add colors, margins, borders, width, height, font styles, paddings, boxes, images, and shadows to a web page. When adding images to a web page, we need to give their location. You can also use colors name or hexadecimal codes for colors.
JavaScript part of Login and Sign-Up form
JavaScript creates form validation, error messages, and user-entered data push into the backend. A JavaScript file is saved using an extension of “main.js”.The complete JavaScript code for login and sign-up forms is as follows.
<!--Figure 8-->
function setFormMessage(formElement, type, message) {
const messageElement = formElement.querySelector(".form__message");messageElement.textContent = message;
messageElement.classList.remove("form__message--success", "form__message--error");
messageElement.classList.add(`form__message--${type}`);
}function setInputError(inputElement, message) {
inputElement.classList.add("form__input--error");
inputElement.parentElement.querySelector(".form__input-error-message").textContent = message;
}function clearInputError(inputElement) {
inputElement.classList.remove("form__input--error");
inputElement.parentElement.querySelector(".form__input-error-message").textContent = "";
}document.addEventListener("DOMContentLoaded", () => {
const loginForm = document.querySelector("#login");
const createAccountForm = document.querySelector("#createAccount");document.querySelector("#linkCreateAccount").addEventListener("click", e => {
e.preventDefault();
loginForm.classList.add("form--hidden");
createAccountForm.classList.remove("form--hidden");
});document.querySelector("#linkLogin").addEventListener("click", e => {
e.preventDefault();
loginForm.classList.remove("form--hidden");
createAccountForm.classList.add("form--hidden");
});loginForm.addEventListener("submit", e => {
e.preventDefault();// Perform your AJAX/Fetch loginsetFormMessage(loginForm, "error", "Invalid username/password combination");
});document.querySelectorAll(".form__input").forEach(inputElement => {
inputElement.addEventListener("blur", e => {
if (e.target.id === "signupUsername" && e.target.value.length > 0 && e.target.value.length < 10) {
setInputError(inputElement, "Username must be at least 10 characters in length");
}
if (e.target.id === "signupPassword" && e.target.value.length > 0 && e.target.value.length < 8) {
setInputError(inputElement, "Password must be at least 8 characters in length");
}
});inputElement.addEventListener("input", e => {
clearInputError(inputElement);
});
});
});
Now, let us take the parts from the above code and check them out.
<!--Figure 8.1-->
document.addEventListener("DOMContentLoaded", () => {
const loginForm = document.querySelector("#login");
const createAccountForm = document.querySelector("#createAccount");document.querySelector("#linkCreateAccount").addEventListener("click", e => {
e.preventDefault();
loginForm.classList.add("form--hidden");
createAccountForm.classList.remove("form--hidden");
});document.querySelector("#linkLogin").addEventListener("click", e => {
e.preventDefault();
loginForm.classList.remove("form--hidden");
createAccountForm.classList.add("form--hidden");
});
According to the cord part of figure 8.1, when you click the “Create New Account” link existing in figure 2, you can quite simply go inside the Sign-Up form. Click the “Create New Account” link, then hide the login form and showing the Sign-Up form. As same as when you click the “Sign in” link existing in figure 5, you can simply go inside the Login form. Then hide the Sign-Up form and showing the Login form.
<!--Figure 8.2-->
loginForm.addEventListener("submit", e => {
e.preventDefault();// Perform your AJAX/Fetch loginsetFormMessage(loginForm, "error", "Invalid username/password combination");
});
Figure 8.2 shows the code part of the error message that the user can see if the user enters invalid data into the login form.
Its interface is as follows.
<!--Figure 8.3-->
document.querySelectorAll(".form__input").forEach(inputElement => {
inputElement.addEventListener("blur", e => {
if (e.target.id === "signupUsername" && e.target.value.length > 0 && e.target.value.length < 10) {
setInputError(inputElement, "Username must be at least 10 characters in length");
}
if (e.target.id === "signupPassword" && e.target.value.length > 0 && e.target.value.length < 8) {
setInputError(inputElement, "Password must be at least 8 characters in length");
}
});Figure 8.3 shows the part of the code that checks if a user has used a signup username of less than 10 characters and a password of less than 8 characters when signing up. Here the username and password entered by the user are checked by if condition.
The relevant interface is as follows.
<!--Figure 8.4-->
function setInputError(inputElement, message) {
inputElement.classList.add("form__input--error");
inputElement.parentElement.querySelector(".form__input-error-message").textContent = message;
}Figure 8.4 shows the code section for setting the error message found in the above interface.
<!--Figure 8.5>
function clearInputError(inputElement) {
inputElement.classList.remove("form__input--error");
inputElement.parentElement.querySelector(".form__input-error-message").textContent = "";
}Figure 8.5 shows the code section for removing the error message when the user re-enters the valid data.
Now let us see what is the purpose of the PHP
PHP or the hypertext preprocessor which is used to develop the backend of the web application is a server-side scripting language and this could be used to develop both dynamic and static web pages. This language only allows interpreting the PHP scripts if a PHP server is installed in the respective machine. This backend developing language is open source and freely available for web developers and this could be considered a major advantage in the development of web site using PHP. Since it is an open-source developing software the language could be learned and scripting can be done easily through any online platform.
After entering the user data in the Login and Sign-Up forms above and clicking on the Login and Create button, that data will be moved to the backend via PHP implementation.
So guys this is how to build a Login and Sign-Up form using HTML, CSS, and JavaScript. Try out the codes I have entered above. Hope you guys enjoy that article and get knowledge. Thank you for reading my article.