html+js 写一个用户登录页面
时间: 2024-04-29 18:22:19 浏览: 13
好的,下面是一个简单的用户登录页面的 HTML 和 JavaScript 代码:
HTML 代码:
```
<!DOCTYPE html>
<html>
<head>
<title>User Login</title>
</head>
<body>
<h1>User Login</h1>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<button type="button" onclick="login()">Login</button>
</form>
<p id="message"></p>
<script src="login.js"></script>
</body>
</html>
```
JavaScript 代码:
```
function login() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if (username == "" || password == "") {
document.getElementById("message").innerHTML = "Please enter both username and password!";
} else if (username == "admin" && password == "admin123") {
document.getElementById("message").innerHTML = "Login successful!";
} else {
document.getElementById("message").innerHTML = "Invalid username or password!";
}
}
```
该页面包含一个简单的登录表单,在用户填写完用户名和密码后,点击“Login”按钮即可触发 JavaScript 中的 login() 函数。该函数会获取输入框中的值,并判断是否为空或者是否正确,然后在页面上显示相应的消息。