JavaScript网页设计-一个简易的登录界面

embedded/2024/12/23 7:12:30/

使用HTML、CSS和JavaScript来构建登录界面的基本步骤和示例代码。

步骤

‌HTML结构‌：定义登录表单的基本结构，包括输入框（用户名和密码）和提交按钮。
‌CSS样式‌：登录表单添加样式。
‌JavaScript交互‌：添加表单验证逻辑，确保用户输入了有效的信息。

示例代码

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"> <!-- 引入CSS文件 -->
</head>
<body><div class="login-container"><h2>登录</h2><form id="loginForm"><div class="form-group"><label for="username">用户名:</label><input type="text" id="username" name="username" required></div><div class="form-group"><label for="password">密码:</label><input type="password" id="password" name="password" required></div><button type="submit">登录</button></form></div><script src="scripts.js"></script> <!-- 引入JavaScript文件 -->
</body>
</html>

CSS

body {font-family: Arial, sans-serif;background-color: #f0f0f0;display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;
}.login-container {background-color: #fff;padding: 20px;border-radius: 8px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);width: 300px;text-align: center;
}.login-container h2 {margin-bottom: 20px;
}.form-group {margin-bottom: 15px;text-align: left;
}.form-group label {display: block;margin-bottom: 5px;
}.form-group input {width: 100%;padding: 8px;box-sizing: border-box;border: 1px solid #ccc;border-radius: 4px;
}button {width: 100%;padding: 10px;background-color: #4CAF50;color: white;border: none;border-radius: 4px;cursor: pointer;font-size: 16px;
}button:hover {background-color: #45a049;
}

JavaScript

javascript">document.getElementById('loginForm').addEventListener('submit', function(event) {event.preventDefault(); // 阻止表单默认提交行为// 获取输入值var username = document.getElementById('username').value;var password = document.getElementById('password').value;// 简单的表单验证if (username === '' || password === '') {alert('用户名和密码不能为空！');return;}// 这里可以添加更多的验证逻辑，比如AJAX请求到服务器验证用户信息// ...// 假设验证成功，跳转到主页（这里只是示例）window.location.href = 'homepage.html';
});