web登陆注册界面源码
时间: 2023-09-09 13:07:17 浏览: 42
Web登录注册界面源码如下:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录/注册</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="form-wrapper">
<button class="switch-button" onclick="switchForm()">注册</button>
<h1>登录</h1>
<form class="login-form" method="post" action="login.php">
<input type="text" name="username" placeholder="用户名" required>
<input type="password" name="password" placeholder="密码" required>
<button type="submit">登录</button>
</form>
</div>
<div class="form-wrapper hidden">
<button class="switch-button" onclick="switchForm()">登录</button>
<h1>注册</h1>
<form class="register-form" method="post" action="register.php">
<input type="text" name="username" placeholder="用户名" required>
<input type="password" name="password" placeholder="密码" required>
<input type="password" name="confirm_password" placeholder="确认密码" required>
<button type="submit">注册</button>
</form>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
```
CSS代码:
```
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
}
.form-wrapper {
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
padding: 30px;
text-align: center;
}
.switch-button {
background-color: #f2f2f2;
border: none;
color: #333;
padding: 10px 20px;
border-radius: 5px;
margin-bottom: 10px;
}
.login-form, .register-form {
display: flex;
flex-direction: column;
align-items: center;
}
.login-form input, .register-form input {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: none;
border-radius: 5px;
}
.login-form button, .register-form button {
background-color: #333;
color: #fff;
border: none;
border-radius: 5px;
padding: 10px 20px;
cursor: pointer;
}
.hidden {
display: none;
}
```
JavaScript代码:
```
function switchForm() {
var loginForm = document.querySelector('.login-form');
var registerForm = document.querySelector('.register-form');
var switchButton = document.querySelector('.switch-button');
if (loginForm.classList.contains('hidden')) {
loginForm.classList.remove('hidden');
registerForm.classList.add('hidden');
switchButton.textContent = '注册';
} else {
loginForm.classList.add('hidden');
registerForm.classList.remove('hidden');
switchButton.textContent = '登录';
}
}
```
这个登陆注册界面包含一个switchForm()函数,用于切换登录和注册表单。HTML代码中的表单将数据提交到login.php和register.php文件,你需要自己编写这两个文件来处理数据。