html登录界面包括用户名,密码,自动登录,忘记密码,立即注册,几个部分 输入正确的账号和密码跳转其他html相关代码及js
时间: 2024-03-20 08:42:49 浏览: 15
好的,下面是一个完整的 HTML 登录界面示例,包括用户名、密码、自动登录、忘记密码、立即注册等部分,并使用 JavaScript 实现了表单验证和跳转功能。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Login</title>
<style>
label {
display: block;
margin-bottom: 10px;
}
input[type="text"], input[type="password"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
margin-bottom: 20px;
box-sizing: border-box;
}
input[type="checkbox"] {
margin-right: 10px;
}
.error {
color: red;
font-size: 12px;
margin-top: 5px;
}
</style>
</head>
<body>
<h1>Login</h1>
<form id="login-form" action="welcome.html" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br>
<span id="username-error" class="error"></span>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br>
<span id="password-error" class="error"></span>
<input type="checkbox" id="remember" name="remember">
<label for="remember">Remember me</label><br>
<a href="#">Forgot password?</a><br>
<input type="submit" value="Login">
<a href="#">Register now</a>
</form>
<script>
var loginForm = document.getElementById('login-form');
var usernameInput = document.getElementById('username');
var passwordInput = document.getElementById('password');
var usernameError = document.getElementById('username-error');
var passwordError = document.getElementById('password-error');
loginForm.addEventListener('submit', function(event) {
// 阻止表单默认提交行为
event.preventDefault();
// 表单验证
var isValid = true;
if (usernameInput.value.trim() === '') {
usernameError.innerHTML = 'Username is required';
isValid = false;
} else {
usernameError.innerHTML = '';
}
if (passwordInput.value.trim() === '') {
passwordError.innerHTML = 'Password is required';
isValid = false;
} else {
passwordError.innerHTML = '';
}
// 如果表单验证通过,则跳转到 welcome.html
if (isValid) {
loginForm.submit();
}
});
</script>
</body>
</html>
```
这个示例使用了 CSS 对表单进行了一定的样式美化,使用了 JavaScript 实现了表单验证和跳转功能。在 JavaScript 部分,我们首先获取了表单元素和相关的输入框和错误提示元素,然后给表单添加了一个 submit 事件监听器,当表单提交时执行表单验证和跳转逻辑。表单验证包括判断用户名和密码输入是否为空,如果为空则显示错误提示信息。如果验证通过,则直接调用表单的 submit 方法进行跳转。
希望这个示例对你有所帮助。