This content originally appeared on DEV Community and was authored by Abhishek Gurjar
Introduction
Hello, developers! I’m excited to share my latest project: a Login Form. This project is perfect for those looking to build a clean and functional login interface that users can use to authenticate themselves. It’s a great way to enhance your frontend development skills using HTML, CSS, and JavaScript while creating a professional user authentication experience.
Project Overview
The Login Form is a web application designed to provide a secure and user-friendly way for users to log in to a website. With a modern and responsive design, it allows users to enter their credentials and access protected areas of the site. This project demonstrates how to create a functional and aesthetically pleasing login form.
Features
- Responsive Layout: The login form adapts to different screen sizes, providing an optimal viewing experience on both desktop and mobile devices.
- Interactive Elements: Includes features such as form validation and error messages to guide users through the login process.
- Clean Design: Presents login fields in a visually appealing and easy-to-use format.
Technologies Used
- HTML: Provides the structure for the Login Form.
- CSS: Styles the form to create a modern and responsive design.
- JavaScript: Manages the interactive elements, including form validation and error handling.
Project Structure
Here’s an overview of the project structure:
Login-Form/
├── index.html
├── style.css
└── script.js
- index.html: Contains the HTML structure for the Login Form.
- style.css: Includes CSS styles to create an engaging and responsive design.
- script.js: Manages the interactive elements of the form, such as validation.
Installation
To get started with the project, follow these steps:
-
Clone the repository:
git clone https://github.com/abhishekgurjar-in/Login-Form.git -
Open the project directory:
cd Login-Form -
Run the project:
- Open the
index.htmlfile in a web browser to view the Login Form.
- Open the
Usage
- Open the form in a web browser.
- Enter your credentials in the input fields.
- Submit the form to test the validation and error handling.
- View error messages if the input fields are not correctly filled.
Code Explanation
HTML
The index.html file defines the structure of the Login Form, including input fields for username and password and a submit button. Here’s a snippet:
<!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" />
<script src="script.js" defer></script>
<title>Login Form</title>
</head>
<body>
<div class="container">
<div id="LoginForm">
<img src="./logo/user_13078032.png" alt="User Logo" />
<h1>Login Form</h1>
</div>
<div class="form_area">
<h4 class="title">Register Now</h4>
<form>
<div class="form_group">
<label for="email" class="sub_title">Email</label>
<input type="email" id="email" class="form_style" />
</div>
<div class="form_group">
<label for="password" class="sub_title">Password</label>
<input
type="password"
id="password"
class="form_style"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
title="Must contain at least one number and one uppercase and lowercase letter, and at least 8 or more characters"
required
/>
</div>
<div>
<button class="btn">Register</button>
</div>
</form>
</div>
</div>
<div id="message">
<h3>Password must contain the following:</h3>
<p id="letter" class="invalid">A <b>lowercase</b> letter</p>
<p id="capital" class="invalid">A <b>capital (uppercase)</b> letter</p>
<p id="number" class="invalid">A <b>number</b></p>
<p id="length" class="invalid">Minimum <b>8 characters</b></p>
</div>
<div class="footer">
<p>Made with ❤️ by Abhishek Gurjar</p>
</div>
</body>
</html>
CSS
The style.css file styles the Login Form, ensuring it’s visually appealing and responsive. Below are some key styles:
@import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800,900");
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: "Poppins", sans-serif;
background: #102770;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
margin-top: 8px;
margin-bottom: 15px;
}
#LoginForm img {
width: 100px;
height: 100px;
}
#LoginForm h1 {
padding-bottom: 40px;
color: white;
}
.form_area {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
max-width: 360px;
border-radius: 25px;
background-color: #ecf0f1;
border: 10px solid rgba(0, 0, 0, 0.05);
}
.title {
font-weight: 900;
font-size: 1.5em;
margin-top: 20px;
}
.sub_title {
font-weight: 600;
margin: 5px 0;
}
.form_group {
display: flex;
flex-direction: column;
margin: 20px;
align-items: baseline;
}
.form_style {
outline: none;
width: 250px;
font-size: 15px;
border-radius: 4px;
padding: 12px;
border: none;
}
.form_style:focus {
border: 1px solid #8e8e8e;
}
.btn {
background-color: #000000;
color: white;
margin: 20px 0;
padding: 15px;
width: 270px;
font-size: 15px;
border-radius: 10px;
font-weight: bold;
cursor: pointer;
border: none;
transition: all 0.2s ease;
}
.btn:hover {
background-color: rgb(41, 40, 40);
}
#message {
display: none;
text-align: center;
color: #ffffff;
}
#message p {
padding: 10px 35px;
font-size: 18px;
}
.valid {
color: green;
}
.valid:before {
content: "✔";
margin-right: 10px;
}
.invalid {
color: red;
}
.invalid:before {
content: "✖";
margin-right: 10px;
}
.footer {
color: white;
margin: 20px;
text-align: center;
}
JavaScript
The script.js file contains the functionality for form validation. Here’s a simple snippet for demonstration:
let passInput = document.getElementById("password");
let letter = document.getElementById("letter");
let capital = document.getElementById("capital");
let number = document.getElementById("number");
let length = document.getElementById("length");
passInput.onfocus = function() {
document.getElementById("message").style.display = "block";
};
passInput.onblur = function() {
document.getElementById("message").style.display = "none";
};
passInput.onkeyup = function() {
let lowerCaseLetters = /[a-z]/g;
if (passInput.value.match(lowerCaseLetters)) {
letter.classList.remove("invalid");
letter.classList.add("valid");
} else {
letter.classList.remove("valid");
letter.classList.add("invalid");
}
let upperCaseLetters = /[A-Z]/g;
if (passInput.value.match(upperCaseLetters)) {
capital.classList.remove("invalid");
capital.classList.add("valid");
} else {
capital.classList.remove("valid");
capital.classList.add("invalid");
}
let numbers = /[0-9]/g;
if (passInput.value.match(numbers)) {
number.classList.remove("invalid");
number.classList.add("valid");
} else {
number.classList.remove("valid");
number.classList.add("invalid");
}
if (passInput.value.length >= 8) {
length.classList.remove("invalid");
length.classList.add("valid");
} else {
length.classList.remove("valid");
length.classList.add("invalid");
}
};
Live Demo
You can check out the live demo of the Login Form project here.
Conclusion
Building the Login Form was a great experience in creating a functional and user-friendly authentication interface. This project highlights the importance of form validation and clean design in modern web development. By applying HTML, CSS, and JavaScript, we’ve developed a login form that serves as a critical component of user authentication. I hope this project inspires you to build your own login or authentication forms. Happy coding!
Credits
This project was developed as part of my continuous learning journey in web development.
Author
- Abhishek Gurjar
This content originally appeared on DEV Community and was authored by Abhishek Gurjar
Abhishek Gurjar | Sciencx (2024-09-01T17:08:56+00:00) Build a Login Form Website. Retrieved from https://www.scien.cx/2024/09/01/build-a-login-form-website/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.