用html设计登录界面,使用用户名“iot2022”才能跳转到功能页面,其他用户显示“登录错误”;
时间: 2023-09-10 17:09:03 浏览: 47
好的,下面是一个简单的HTML代码示例,可以实现你所需要的登录功能:
```
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
</head>
<body>
<h1>Login to access the functionality</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="result"></p>
<script>
function login() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
if (username === "iot2022" && password === "password") {
window.location.href = "functionality.html";
} else {
document.getElementById("result").innerHTML = "Login error";
}
}
</script>
</body>
</html>
```
在这个代码中,我们创建了一个简单的登录页面,用户需要输入用户名和密码才能登录。当用户点击“Login”按钮时,JavaScript代码会检查用户名和密码是否正确。如果用户名是“iot2022”且密码是“password”,则会跳转到名为“functionality.html”的功能页面。否则,页面会显示“Login error”消息。
请注意,这只是一个简单的示例,实际的登录页面需要更加复杂和安全。例如,密码应该被加密存储,以防止黑客攻击。