只利用web应用程序设计一个简单的登录登录界面,用户可以输入用户名、密码等信息,界面包含Label、TextBox、Button等控件。用户名和密码分别为admin和202401,若密码正确显示登陆成功,否则登陆失败。
时间: 2024-09-20 14:02:45 浏览: 15
设计一个简单的Web应用程序登录界面通常会涉及HTML、CSS和JavaScript。首先,我们需要创建以下几个基本元素:
1. HTML结构:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>登录页面</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="login-form">
<h2>登录</h2>
<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>
<button type="submit">登录</button>
<p id="result"></p>
</form>
</div>
<script src="scripts.js"></script>
</body>
</html>
```
2. CSS样式 (styles.css):
```css
.login-form {
width: 300px;
margin: auto;
padding: 20px;
border: 1px solid #ccc;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
```
3. JavaScript验证 (scripts.js):
```javascript
document.getElementById('loginForm').addEventListener('submit', function(event) {
event.preventDefault(); // 阻止表单默认提交
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
if (username === 'admin' && password === '202401') {
document.getElementById('result').innerText = '登录成功!';
} else {
document.getElementById('result').innerText = '用户名或密码错误!';
}
});
```
在这个例子中,当用户点击登录按钮时,JavaScript会检查输入的用户名和密码是否匹配预设值。如果匹配,则显示"登录成功!",否则显示"用户名或密码错误!"。