開發者們大家好！我很高興分享我的最新項目：登入表單。該專案非常適合希望建立一個乾淨且功能齊全的登入介面的人，使用者可以使用該介面來驗證自己的身份。這是使用 HTML、CSS 和 JavaScript 增強前端開發技能的好方法，同時創建專業的使用者驗證體驗。
登入表單是一個網路應用程序，旨在為用戶提供安全且用戶友好的方式登入網站。它採用現代且響應式的設計，允許使用者輸入憑證並存取網站的受保護區域。此專案示範如何建立功能齊全且美觀的登入表單。
以下是項目結構的概述：
Login-Form/ ├── index.html ├── style.css └── script.js
要開始該項目，請按照以下步驟操作：
複製儲存庫：
git clone https://github.com/abhishekgurjar-in/Login-Form.git
開啟專案目錄:
cd Login-Form
運行項目:
index.html 檔案定義了登入表單的結構，包括使用者名稱和密碼的輸入欄位以及提交按鈕。這是一個片段：
<!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>
style.css 檔案設定登入表單的樣式，確保其具有視覺吸引力和回應能力。以下是一些關鍵樣式：
@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;
}
script.js 檔案包含表單驗證的功能。這是一個簡單的示範片段：
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");
}
};
您可以在此處查看登入表單項目的現場示範。
建立登入表單對於建立功能齊全且使用者友好的身份驗證介面來說是一次很棒的體驗。該專案強調了表單驗證和簡潔設計在現代 Web 開發中的重要性。透過應用 HTML、CSS 和 JavaScript，我們開發了一個登入表單，作為使用者驗證的關鍵元件。我希望這個專案能夠激勵您建立自己的登入或身份驗證表單。快樂編碼！
這個專案是我在 Web 開發方面持續學習之旅的一部分。
以上是建立一個登入表單網站的詳細內容。更多資訊請關注PHP中文網其他相關文章！
