运用html、css、js编写一个登录注册网页
时间: 2024-01-14 07:02:35 浏览: 32
以下是一个简单的登录注册网页示例,使用 HTML、CSS 和 JavaScript 编写:
HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login/Register Form</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="login-box">
<div class="form-header">
<h2>Login/Register</h2>
</div>
<form id="login-form" class="login-form">
<h3>Login</h3>
<input type="text" name="username" placeholder="Username">
<input type="password" name="password" placeholder="Password">
<button type="submit">Login</button>
</form>
<form id="register-form" class="register-form">
<h3>Register</h3>
<input type="text" name="username" placeholder="Username">
<input type="password" name="password" placeholder="Password">
<input type="password" name="confirm-password" placeholder="Confirm Password">
<button type="submit">Register</button>
</form>
</div>
<script src="script.js"></script>
</body>
</html>
```
CSS 代码:
```css
body {
background-color: #f2f2f2;
font-family: Arial, sans-serif;
}
.login-box {
background-color: #fff;
border-radius: 10px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.2);
margin: 100px auto;
padding: 20px;
max-width: 400px;
}
.form-header {
background-color: #333;
border-radius: 10px 10px 0 0;
color: #fff;
padding: 10px;
text-align: center;
}
.form-header h2 {
margin: 0;
}
.login-form, .register-form {
display: none;
}
.login-form input, .register-form input {
border-radius: 5px;
display: block;
font-size: 16px;
margin-bottom: 10px;
padding: 10px;
width: 100%;
}
.login-form button, .register-form button {
background-color: #333;
border: none;
border-radius: 5px;
color: #fff;
cursor: pointer;
font-size: 16px;
padding: 10px;
width: 100%;
}
.login-form button:hover, .register-form button:hover {
background-color: #555;
}
.error {
color: red;
font-size: 14px;
margin-top: 5px;
}
```
JavaScript 代码:
```js
const loginForm = document.getElementById('login-form');
const registerForm = document.getElementById('register-form');
const errorElement = document.getElementById('error');
document.getElementById('login-btn').addEventListener('click', () => {
registerForm.style.display = 'none';
loginForm.style.display = 'block';
});
document.getElementById('register-btn').addEventListener('click', () => {
loginForm.style.display = 'none';
registerForm.style.display = 'block';
});
loginForm.addEventListener('submit', (e) => {
e.preventDefault();
// TODO: perform login action
});
registerForm.addEventListener('submit', (e) => {
e.preventDefault();
const username = registerForm.elements['username'].value;
const password = registerForm.elements['password'].value;
const confirmPassword = registerForm.elements['confirm-password'].value;
if (password !== confirmPassword) {
errorElement.innerText = 'Passwords do not match';
return;
}
// TODO: perform registration action
});
```
这里的代码只是一个基本示例,实际中可能需要更多的表单验证和后端交互等实现。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)