登录页面包括登录和注册两个页面并且能实现跳转
时间: 2024-05-03 15:17:47 浏览: 18
好的,你需要先创建两个页面,一个是登录页面,另一个是注册页面。在这两个页面中,你需要添加一些输入框和按钮来实现用户的登录和注册操作。同时,你需要在代码中设置跳转链接,使得用户可以在登录和注册页面之间进行切换。
以下是一个简单的示例代码,你可以借鉴一下:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Login and Register</title>
</head>
<body>
<h1>Welcome to our website</h1>
<div>
<button onclick="showLogin()">Login</button>
<button onclick="showRegister()">Register</button>
</div>
<div id="login" style="display:none">
<h2>Login</h2>
<form>
<label>Email:</label><br>
<input type="email" name="email"><br>
<label>Password:</label><br>
<input type="password" name="password"><br><br>
<input type="submit" value="Login">
</form>
</div>
<div id="register" style="display:none">
<h2>Register</h2>
<form>
<label>Name:</label><br>
<input type="text" name="name"><br>
<label>Email:</label><br>
<input type="email" name="email"><br>
<label>Password:</label><br>
<input type="password" name="password"><br><br>
<input type="submit" value="Register">
</form>
</div>
<script>
function showLogin() {
document.getElementById("login").style.display = "block";
document.getElementById("register").style.display = "none";
}
function showRegister() {
document.getElementById("login").style.display = "none";
document.getElementById("register").style.display = "block";
}
</script>
</body>
</html>
```
在这个示例中,我们创建了一个登录和注册的页面,并且在页面顶部添加了两个按钮,用户可以通过点击按钮来切换页面。
我们使用了JavaScript函数来实现切换效果,当用户点击“Login”按钮时,会显示登录页面,同时隐藏注册页面;当用户点击“Register”按钮时,会显示注册页面,同时隐藏登录页面。
你可以根据自己的需要来修改这个示例,添加更多的表单项和功能。