Bina Laman Web Borang Log Masuk-tutorial css-php.cn

Build a Login Form Website

pengenalan

Helo, pembangun! Saya teruja untuk berkongsi projek terbaharu saya: Borang Log Masuk. Projek ini sesuai untuk mereka yang ingin membina antara muka log masuk yang bersih dan berfungsi yang boleh digunakan oleh pengguna untuk mengesahkan diri mereka sendiri. Ini cara yang bagus untuk meningkatkan kemahiran pembangunan bahagian hadapan anda menggunakan HTML, CSS dan JavaScript sambil mencipta pengalaman pengesahan pengguna profesional.

Gambaran Keseluruhan Projek

Borang Log Masuk ialah aplikasi web yang direka bentuk untuk menyediakan cara yang selamat dan mesra pengguna untuk pengguna log masuk ke tapak web. Dengan reka bentuk yang moden dan responsif, ia membolehkan pengguna memasukkan kelayakan mereka dan mengakses kawasan yang dilindungi tapak. Projek ini menunjukkan cara membuat borang log masuk yang berfungsi dan menyenangkan dari segi estetika.

Ciri-ciri

Reka Letak Responsif: Borang log masuk menyesuaikan diri dengan saiz skrin yang berbeza, memberikan pengalaman tontonan yang optimum pada kedua-dua desktop dan peranti mudah alih.
Elemen Interaktif: Termasuk ciri seperti pengesahan borang dan mesej ralat untuk membimbing pengguna melalui proses log masuk.
Reka Bentuk Bersih: Mempersembahkan medan log masuk dalam format yang menarik secara visual dan mudah digunakan.

Teknologi yang Digunakan

HTML: Menyediakan struktur untuk Borang Log Masuk.
CSS: Menggayakan borang untuk mencipta reka bentuk yang moden dan responsif.
JavaScript: Mengurus elemen interaktif, termasuk pengesahan borang dan pengendalian ralat.

Struktur Projek

Berikut ialah gambaran keseluruhan struktur projek:

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

Salin selepas log masuk

index.html: Mengandungi struktur HTML untuk Borang Log Masuk.
style.css: Termasuk gaya CSS untuk mencipta reka bentuk yang menarik dan responsif.
script.js: Mengurus elemen interaktif borang, seperti pengesahan.

Pemasangan

Untuk memulakan projek, ikut langkah berikut:

Klon repositori:

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

Salin selepas log masuk

Buka direktori projek:
```
cd Login-Form
```
Salin selepas log masuk
Jalankan projek:
- Buka fail index.html dalam pelayar web untuk melihat Borang Log Masuk.

Penggunaan

Buka borang dalam penyemak imbas web.
Masukkan bukti kelayakan anda dalam medan input.
Serahkan borang untuk menguji pengesahan dan pengendalian ralat.
Lihat mesej ralat jika medan input tidak diisi dengan betul.

Penerangan Kod

HTML

Fail index.html mentakrifkan struktur Borang Log Masuk, termasuk medan input untuk nama pengguna dan kata laluan serta butang hantar. Berikut adalah coretan:

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

Salin selepas log masuk

CSS

Fail style.css menggayakan Borang Log Masuk, memastikan ia menarik dan responsif secara visual. Di bawah ialah beberapa gaya utama:

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

Salin selepas log masuk

JavaScript

Fail script.js mengandungi fungsi untuk pengesahan borang. Berikut ialah coretan ringkas untuk demonstrasi:

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

Salin selepas log masuk

Demo Langsung

Anda boleh melihat demo langsung projek Borang Log Masuk di sini.

Kesimpulan

Membina Borang Log Masuk ialah pengalaman hebat dalam mencipta antara muka pengesahan yang berfungsi dan mesra pengguna. Projek ini menyerlahkan kepentingan pengesahan borang dan reka bentuk yang bersih dalam pembangunan web moden. Dengan menggunakan HTML, CSS dan JavaScript, kami telah membangunkan borang log masuk yang berfungsi sebagai komponen penting dalam pengesahan pengguna. Saya harap projek ini memberi inspirasi kepada anda untuk membina borang log masuk atau pengesahan anda sendiri. Selamat mengekod!