如何 *** 输入用户名和密码登录的网页？

1年前 (2024-02-02)阅读6回复2最佳爬楼位置

管理员
注册排名1
经验值1285505
级别管理员
主题257101
回复0

楼主

如何制作输入用户名和密码登录的网页？

HTML部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>登录页面</h1>
    <form id="loginForm">
        <label for="username">用户名:</label>
        <input type="text" id="username" name="username" required>
        
        <label for="password">密码:</label>
        <input type="password" id="password" name="password" required>
        
        <!-- 添加了登录按钮，并为其设置了ID -->
        <button type="submit" id="loginBtn">登录</button>
    </form>
    
    <!-- 引入JavaScript文件 -->
    <script src="scripts.js"></script>
</body>
</html>

CSS部分（styles.css）：

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0; /* 添加背景颜色 */
}
h1 {
    text-align: center;
    color: #333; /* 修改文字颜色 */
}
form {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 300px;
    padding: 20px; /* 添加内边距 */
    border: 1px solid #ddd; /* 添加边框样式 */
    border-radius: 4px; /* 添加圆角 */
    margin-top: 50px; /* 调整位置 */
}
label {
    font-size: 1rem; /* 调整字体大小 */
    margin-bottom: 1rem; /* 调整标签与输入框间距 */
}
input[type="text"], input[type="password"] {
    padding: 8px; /* 调整内边距 */
    border: none; /* 移除边框 */
    border-radius: 4px; /* 添加圆角 */
    box-sizing: border-box; /* 使内边距和边框包含在总宽度内 */
}

JavaScript部分（scripts.js）：（注意：在实际应用中，您需要使用更安全的验证 *** ，如后端验证和加密存储密码）

// 获取表单和输入元素及按钮元素（已添加ID）
const form = document.getElementById('loginForm');
const usernameInput = document.getElementById('username');
const passwordInput = document.getElementById('password');
const loginBtn = document.getElementById('loginBtn'); // 新增的按钮ID用于事件监听器中获取元素引用。

如何 *** 网页游戏登陆