web登陆注册界面源码
时间: 2023-08-28 11:06:46 浏览: 57
这是一个简单的HTML/CSS/JavaScript登陆注册界面源码:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Login/Register Form</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<div class="form">
<h2>Login</h2>
<form>
<input type="text" placeholder="Username">
<input type="password" placeholder="Password">
<button type="submit">Login</button>
</form>
<p>Don't have an account? <a href="#" onclick="toggleForm();">Register</a></p>
</div>
<div class="form hidden">
<h2>Register</h2>
<form>
<input type="text" placeholder="Username">
<input type="email" placeholder="Email">
<input type="password" placeholder="Password">
<input type="password" placeholder="Confirm Password">
<button type="submit">Register</button>
</form>
<p>Already have an account? <a href="#" onclick="toggleForm();">Login</a></p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
```
CSS代码:
```css
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background-color: #f2f2f2;
}
.container {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.form {
background-color: #fff;
padding: 40px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
max-width: 400px;
width: 100%;
}
.form h2 {
margin: 0 0 20px;
}
.form form {
display: flex;
flex-direction: column;
}
.form input {
margin-bottom: 10px;
padding: 10px;
border: none;
border-radius: 5px;
background-color: #f2f2f2;
}
.form button[type="submit"] {
margin-top: 20px;
padding: 10px;
border: none;
border-radius: 5px;
background-color: #4CAF50;
color: #fff;
cursor: pointer;
}
.form p {
margin-top: 20px;
text-align: center;
}
.form a {
color: #4CAF50;
text-decoration: none;
}
.hidden {
display: none;
}
```
JavaScript代码:
```javascript
function toggleForm() {
var loginForm = document.getElementsByClassName("form")[0];
var registerForm = document.getElementsByClassName("form")[1];
loginForm.classList.toggle("hidden");
registerForm.classList.toggle("hidden");
}
```
这个代码包含一个登陆界面和一个注册界面,初始显示登陆界面。当用户点击“Register”时,登陆界面隐藏,注册界面显示。当用户点击“Login”时,注册界面隐藏,登陆界面显示。