hbuilder简单登录界面代码,然后跳转页面
时间: 2023-08-17 18:05:14 浏览: 412
以下是一个简单的 HBuilder 登录界面的代码示例,它会在用户输入正确的用户名和密码后跳转到另一个页面:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Login</title>
<style>
body {
background-color: #f1f1f1;
}
form {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
padding: 20px;
width: 300px;
margin: 100px auto;
}
input[type=text], input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
button {
background-color: #4CAF50;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
width: 100%;
}
button:hover {
background-color: #45a049;
}
</style>
</head>
<body>
<form id="loginForm">
<h2>Login</h2>
<label for="username"><b>Username</b></label>
<input type="text" placeholder="Enter Username" name="username" required>
<label for="password"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="password" required>
<button type="submit">Login</button>
</form>
<script>
// 获取表单元素和跳转页面地址
var form = document.getElementById('loginForm');
var nextPage = 'http://www.example.com/nextpage.html';
// 监听表单提交事件
form.addEventListener('submit', function(event) {
event.preventDefault(); // 阻止默认的表单提交行为
// 获取用户名和密码的值
var username = form.elements['username'].value;
var password = form.elements['password'].value;
// 检查用户名和密码是否正确
if (username === 'admin' && password === 'password') {
// 跳转到下一个页面
window.location.href = nextPage;
} else {
alert('Invalid username or password. Please try again.');
}
});
</script>
</body>
</html>
```
此代码会生成一个简单的登录界面,包含用户名、密码输入框和一个登录按钮。当用户输入正确的用户名和密码后,会跳转到 `nextPage` 指定的页面。你可以根据自己的需要修改和扩展此代码。