给我生成一个登录注册页面的前端代码
时间: 2024-03-06 20:49:46 浏览: 19
以下是一个简单的登录和注册页面的前端代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>Login and Register Page</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="form-container">
<div class="form-btn">
<button type="button" class="login-btn">Login</button>
<button type="button" class="register-btn">Register</button>
</div>
<form class="login-form">
<h2>Login</h2>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<button type="submit">Login</button>
</form>
<form class="register-form">
<h2>Register</h2>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<label for="confirm-password">Confirm Password:</label>
<input type="password" id="confirm-password" name="confirm-password" required>
<button type="submit">Register</button>
</form>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
```
该示例包括一个容器div,其中包含一个表单容器div。表单容器中包含两个按钮(登录和注册),用于切换两个表单(登录表单和注册表单)。每个表单都包含输入字段和提交按钮。您可以将此示例代码保存到.html文件中,同时需要添加一个CSS文件和一个JavaScript文件。