html css js登录注册界面代码
时间: 2023-11-21 07:04:46 浏览: 37
以下是一个基本的HTML/CSS/JS登录注册界面的代码示例:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Login/Register Form</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="form-container">
<form id="login-form" class="login-form">
<h2>Login</h2>
<input type="email" placeholder="Email">
<input type="password" placeholder="Password">
<button type="submit">Login</button>
</form>
<form id="register-form" class="register-form">
<h2>Register</h2>
<input type="text" placeholder="Full Name">
<input type="email" placeholder="Email">
<input type="password" placeholder="Password">
<button type="submit">Register</button>
</form>
</div>
<script src="script.js"></script>
</body>
</html>
```
CSS代码:
```css
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
.form-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
form {
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
padding: 20px;
width: 400px;
}
h2 {
font-size: 24px;
margin-bottom: 20px;
}
input {
border: none;
border-radius: 3px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
font-size: 16px;
margin-bottom: 10px;
padding: 10px;
width: 100%;
}
button[type="submit"] {
background-color: #007bff;
border: none;
border-radius: 3px;
color: #fff;
cursor: pointer;
font-size: 16px;
padding: 10px;
width: 100%;
}
button[type="submit"]:hover {
background-color: #0069d9;
}
```
JS代码:
```js
const loginForm = document.getElementById("login-form");
const registerForm = document.getElementById("register-form");
const loginButton = document.getElementById("login-button");
const registerButton = document.getElementById("register-button");
registerButton.addEventListener("click", () => {
loginForm.style.display = "none";
registerForm.style.display = "block";
});
loginButton.addEventListener("click", () => {
loginForm.style.display = "block";
registerForm.style.display = "none";
});
```
这个示例包括两个表单:一个用于登录,一个用于注册。由于这些表单都是在同一个页面上,因此我们使用JavaScript来处理它们之间的显示和隐藏。当用户点击“Register”按钮时,登录表单将被隐藏,注册表单将被显示,并且反之亦然。