设计一个简单的登录登录界面,用户可以输入用户名、密码等信息,界面包含Label、TextBox、Button等控件。用户名和密码分别为admin和202401,若密码正确显示登陆成功,否则登陆失败。html
时间: 2024-09-20 16:02:43 浏览: 31
设计一个简单的HTML登录页面,你可以使用基本的HTML结构,配合CSS样式美化,并利用JavaScript进行交互验证。下面是一个基础的示例:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>登录界面</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f5f5f5;
}
form {
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
input[type=text], input[type=password] {
margin-bottom: 10px;
width: 300px;
padding: 10px;
border: 1px solid #ccc;
}
button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
border-radius: 5px;
}
.message {
margin-top: 15px;
color: red;
}
</style>
</head>
<body>
<form id="loginForm">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" placeholder="admin"><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password" placeholder="202401"><br>
<button onclick="validateLogin()">登录</button>
<div class="message" id="errorMessage"></div>
</form>
<script>
function validateLogin() {
const username = document.getElementById("username").value;
const password = document.getElementById("password").value;
if (username === "admin" && password === "202401") {
document.getElementById("errorMessage").innerText = "登录成功!";
document.getElementById("errorMessage").classList.add("success");
} else {
document.getElementById("errorMessage").innerText = "登录失败,请检查您的用户名和密码!";
document.getElementById("errorMessage").classList.remove("success");
}
}
// 初始化,隐藏错误消息
validateLogin();
</script>
</body>
</html>
```
在这个例子中,我们创建了一个包含用户名输入框、密码输入框和登录按钮的表单。点击登录按钮时,`validateLogin`函数会被调用,对输入的用户名和密码进行检查,如果匹配则显示登录成功的提示,否则显示登录失败的消息。