帮我使用HTML写一个登录界面有交互页面的方式
时间: 2024-02-26 20:59:19 浏览: 13
好的,以下是一个使用HTML和JavaScript实现的登录界面示例,其中包括了交互页面的方式:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login Page</title>
<style>
/* 样式可以自行修改 */
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
.container {
width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0,0,0,.3);
}
h1 {
margin-top: 0;
text-align: center;
}
input[type="text"], input[type="password"] {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: none;
border-radius: 3px;
box-shadow: 0 0 5px rgba(0,0,0,.1);
}
input[type="submit"] {
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 3px;
cursor: pointer;
}
.error {
color: red;
font-size: 14px;
margin-top: 10px;
}
.hidden {
display: none;
}
.show {
display: block;
}
</style>
</head>
<body>
<div class="container">
<h1>Login</h1>
<form id="login-form">
<input type="text" id="username" placeholder="Username">
<input type="password" id="password" placeholder="Password">
<input type="submit" value="Login">
</form>
<form id="phone-form" class="hidden">
<input type="text" id="phone" placeholder="Phone Number">
<input type="text" id="code" placeholder="Verification Code">
<input type="submit" value="Login">
</form>
<div id="switch">
<a href="#" id="switch-to-username">Username/Password</a>
<a href="#" id="switch-to-phone" class="hidden">Phone Number</a>
</div>
<div id="error-msg" class="error hidden"></div>
</div>
<script>
// 获取表单和切换按钮元素
const loginForm = document.getElementById('login-form');
const phoneForm = document.getElementById('phone-form');
const switchToUsername = document.getElementById('switch-to-username');
const switchToPhone = document.getElementById('switch-to-phone');
const errorMsg = document.getElementById('error-msg');
// 切换到账号密码登录表单
switchToUsername.addEventListener('click', function(e) {
e.preventDefault();
loginForm.classList.remove('hidden');
phoneForm.classList.add('hidden');
switchToUsername.classList.add('hidden');
switchToPhone.classList.remove('hidden');
});
// 切换到手机号登录表单
switchToPhone.addEventListener('click', function(e) {
e.preventDefault();
loginForm.classList.add('hidden');
phoneForm.classList.remove('hidden');
switchToUsername.classList.remove('hidden');
switchToPhone.classList.add('hidden');
});
// 提交账号密码登录表单
loginForm.addEventListener('submit', function(e) {
e.preventDefault();
// 进行表单验证
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
if (username === '' || password === '') {
errorMsg.textContent = 'Please enter username and password.';
errorMsg.classList.remove('hidden');
return;
}
// 提交表单
// 这里可以使用Ajax等技术向后端发送登录请求
alert(`Login with username ${username} and password ${password}.`);
});
// 提交手机号登录表单
phoneForm.addEventListener('submit', function(e) {
e.preventDefault();
// 进行表单验证
const phone = document.getElementById('phone').value;
const code = document.getElementById('code').value;
if (phone === '' || code === '') {
errorMsg.textContent = 'Please enter phone number and verification code.';
errorMsg.classList.remove('hidden');
return;
}
// 提交表单
// 这里可以使用Ajax等技术向后端发送登录请求
alert(`Login with phone number ${phone} and verification code ${code}.`);
});
</script>
</body>
</html>
```
该示例包含两个表单,一个用于账号密码登录,一个用于手机号登录。用户可以通过点击切换按钮,切换到对应的表单。在表单提交时,JavaScript会进行表单验证,并向后端发送登录请求。如果表单验证失败,会显示错误提示信息。
你可以根据需要修改该示例的样式和JavaScript代码,以满足自己的需求。