html
<title>登录/注册页面</title>
<style>
</style>
<div id="login">
<h2>登录</h2>
<form action="/login" method="post">
<input type="text" name="username" placeholder="用户名" required><br>
<input type="password" name="password" placeholder="密码" required><br>
<input type="submit" value="登录">
</form>
<p><a href="#register">还没有账号？立即注册</a></p>
</div>
<div id="register" style="display: none;">
<h2>注册</h2>
<form action="/register" method="post">
<input type="text" name="username" placeholder="用户名" required><br>
<input type="password" name="password" placeholder="密码" required><br>
<!-- 可以添加更多字段如邮箱，姓名等 -->
<input type="submit" value="注册">
</form>
<p><a href="#login">已有账号？返回登录</a></p>
</div>
<script>
// 使用JavaScript切换登录和注册表单的显示和隐藏状态
function toggleForms() {
var login = document.getElementById(’login’);
var register = document.getElementById(’register’);
if (login.style.display === "none") {
login.style.display = "block";
register.style.display = "none";
} else {
login.style.display = "none";
register.style.display = "block";
}
}
</script>
在此模板中，我们创建了两个div，一个用于登录，一个用于注册，点击链接可以在两个表单之间切换，表单的提交动作（action）被设置为处理登录和注册的服务器端点（quot;/login"和"/register"），请注意替换为您自己的服务器端点，在提交表单时，使用POST方法将用户输入的数据发送到服务器，输入字段是必需的，因此使用了required属性，在实际开发中，您可能还需要添加更多的验证和错误处理机制。
