登陆注册切换hytml
时间: 2023-07-09 19:31:34 浏览: 36
您可以使用以下代码实现一个简单的登陆注册切换页面:
```html
<!DOCTYPE html>
<html>
<head>
<title>Login/Sign Up Page</title>
<style>
body {
background-color: #f1f1f1;
}
.container {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0,0,0,0.1);
padding: 20px;
margin: 50px auto;
max-width: 500px;
text-align: center;
}
.container h1 {
font-size: 32px;
margin-bottom: 30px;
}
form {
display: none;
margin-top: 30px;
}
form.show {
display: block;
}
form input {
display: block;
margin: 20px auto;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
width: 100%;
max-width: 300px;
box-sizing: border-box;
font-size: 16px;
}
form button {
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 5px;
padding: 10px 20px;
margin-top: 20px;
font-size: 16px;
cursor: pointer;
}
form button:hover {
background-color: #3e8e41;
}
.switch {
margin-top: 30px;
}
.switch a {
text-decoration: none;
color: #4CAF50;
font-size: 16px;
font-weight: bold;
}
.switch a:hover {
text-decoration: underline;
}
</style>
<script>
function showForm(formName) {
var forms = document.getElementsByTagName('form');
for (var i = 0; i < forms.length; i++) {
forms[i].classList.remove('show');
}
document.getElementById(formName).classList.add('show');
}
</script>
</head>
<body>
<div class="container">
<h1>Login/Sign Up</h1>
<form id="login-form" class="show">
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<button type="submit">Login</button>
</form>
<form id="signup-form">
<input type="text" placeholder="Username">
<input type="email" placeholder="Email">
<input type="password" placeholder="Password">
<button type="submit">Sign Up</button>
</form>
<div class="switch">
<a href="#" onclick="showForm('login-form')">Already have an account? Login</a>
<a href="#" onclick="showForm('signup-form')">Don't have an account? Sign Up</a>
</div>
</div>
</body>
</html>
```
这段代码中,我们使用了两个form元素来分别表示登陆和注册表单,并使用了JavaScript来切换表单的显示与隐藏。同时,我们还添加了一个文本链接,用于在登陆和注册之间切换。您可以根据需要进行修改和调整。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)