Build a Login Form Website-CSS Tutorial-php.cn

Build a Login Form Website

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

Copy after login

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

Copy after login

Open the project directory:
```
cd Login-Form
```
Copy after login
Run the project:
- Open the index.html file in a web browser to view the Login Form.

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>

Copy after login

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;
}

Copy after login

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");
  }
};

Copy after login

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
- GitHub Profile

The above is the detailed content of Build a Login Form Website. For more information, please follow other related articles on the PHP Chinese website!