开发者们大家好！我很高兴分享我的最新项目：登录表单。该项目非常适合那些希望构建一个干净且功能齐全的登录界面的人，用户可以使用该界面来验证自己的身份。这是使用 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中文网其他相关文章！
