Créer un site Web de formulaire de connexion-tutoriel CSS-php.cn

Créer un site Web de formulaire de connexion

WBOY

Libérer： 2024-09-03 14:08:02

original

615 Les gens l'ont consulté

Build a Login Form Website

Introduction

Bonjour les développeurs ! Je suis ravi de partager mon dernier projet : un Formulaire de connexion. Ce projet est parfait pour ceux qui cherchent à créer une interface de connexion propre et fonctionnelle que les utilisateurs peuvent utiliser pour s'authentifier. C'est un excellent moyen d'améliorer vos compétences en développement front-end en utilisant HTML, CSS et JavaScript tout en créant une expérience d'authentification utilisateur professionnelle.

Aperçu du projet

Le Formulaire de connexion est une application Web conçue pour fournir aux utilisateurs un moyen sécurisé et convivial de se connecter à un site Web. Avec un design moderne et réactif, il permet aux utilisateurs de saisir leurs identifiants et d'accéder aux zones protégées du site. Ce projet montre comment créer un formulaire de connexion fonctionnel et esthétique.

Caractéristiques

Mise en page réactive : le formulaire de connexion s'adapte à différentes tailles d'écran, offrant une expérience visuelle optimale sur les ordinateurs de bureau et les appareils mobiles.
Éléments interactifs : inclut des fonctionnalités telles que la validation de formulaire et des messages d'erreur pour guider les utilisateurs tout au long du processus de connexion.
Design épuré : présente les champs de connexion dans un format visuellement attrayant et facile à utiliser.

Technologies utilisées

HTML : Fournit la structure du formulaire de connexion.
CSS : stylise le formulaire pour créer un design moderne et réactif.
JavaScript : Gère les éléments interactifs, y compris la validation du formulaire et la gestion des erreurs.

Structure du projet

Voici un aperçu de la structure du projet :

Login-Form/
├── index.html
├── style.css
└── script.js

Copier après la connexion

index.html : Contient la structure HTML du formulaire de connexion.
style.css : inclut des styles CSS pour créer un design attrayant et réactif.
script.js : Gère les éléments interactifs du formulaire, comme la validation.

Installation

Pour démarrer le projet, suivez ces étapes :

Cloner le dépôt :

git clone https://github.com/abhishekgurjar-in/Login-Form.git

Copier après la connexion

Ouvrez le répertoire du projet :
```
cd Login-Form
```
Copier après la connexion
Exécuter le projet :
- Ouvrez le fichier index.html dans un navigateur Web pour afficher le formulaire de connexion.

Usage

Ouvrez le formulaire dans un navigateur Web.
Entrez vos identifiants dans les champs de saisie.
Envoyez le formulaire pour tester la validation et la gestion des erreurs.
Afficher les messages d'erreur si les champs de saisie ne sont pas correctement remplis.

Explication du code

HTML

Le fichier index.html définit la structure du formulaire de connexion, y compris les champs de saisie pour le nom d'utilisateur et le mot de passe et un bouton de soumission. En voici un extrait :

<!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>

Copier après la connexion

CSS

Le fichier style.css stylise le formulaire de connexion, garantissant qu'il est visuellement attrayant et réactif. Voici quelques styles clés :

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

Copier après la connexion

Javascript

Le fichier script.js contient la fonctionnalité de validation de formulaire. Voici un extrait simple à titre de démonstration :

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

Copier après la connexion

Démo en direct

Vous pouvez consulter la démo en direct du projet Login Form ici.

Conclusion

La création du formulaire de connexion a été une expérience formidable dans la création d'une interface d'authentification fonctionnelle et conviviale. Ce projet met en évidence l'importance de la validation des formulaires et d'une conception épurée dans le développement Web moderne. En appliquant HTML, CSS et JavaScript, nous avons développé un formulaire de connexion qui constitue un élément essentiel de l'authentification des utilisateurs. J'espère que ce projet vous inspirera pour créer vos propres formulaires de connexion ou d'authentification. Bon codage !