web前段开发 登录界面输入账号密码后跳转到对应页面的相关代码 大二简单一点的相关代码

以下是一个简单的登录界面的示例代码，使用了HTML、CSS和JavaScript：

HTML代码：

<form id="login-form">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username"><br>
  <label for="password">Password:</label>
  <input type="password" id="password" name="password"><br>
  <input type="submit" value="Login">
</form>

CSS代码：

#login-form {
  margin: 20px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input[type="text"], input[type="password"] {
  padding: 5px;
  border-radius: 5px;
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

input[type="submit"] {
  padding: 5px 10px;
  background-color: #4CAF50;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

JavaScript代码：

const loginForm = document.querySelector('#login-form');
const usernameInput = document.querySelector('#username');
const passwordInput = document.querySelector('#password');

loginForm.addEventListener('submit', (event) => {
  event.preventDefault(); // 阻止表单提交
  const username = usernameInput.value;
  const password = passwordInput.value;
  if (username === 'admin' && password === '123456') {
    window.location.href = 'home.html'; // 跳转到对应页面
  } else {
    alert('Invalid username or password.'); // 显示错误提示
  }
});

这段代码会在用户点击登录按钮时检查输入的用户名和密码是否正确，如果正确则跳转到home.html页面，否则会显示错误提示。注意，这只是一个简单的示例，实际应用中需要进行更完善的登录验证和安全措施。