生成一个登录注册的html页面
时间: 2024-04-07 07:30:19 浏览: 17
以下是一个简单的登录注册的 HTML 页面:
```html
<!DOCTYPE html>
<html>
<head>
<title>Login/Register</title>
<style>
form {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 50px;
}
input {
margin: 10px;
padding: 10px;
border-radius: 5px;
border: none;
box-shadow: 2px 2px 5px grey;
width: 300px;
}
button {
margin-top: 20px;
padding: 10px 20px;
border-radius: 5px;
border: none;
background-color: #007bff;
color: white;
font-size: 18px;
cursor: pointer;
}
.error {
color: red;
font-size: 14px;
margin-top: 10px;
}
</style>
</head>
<body>
<h1>Login/Register</h1>
<form id="login-form">
<h2>Login</h2>
<input type="email" placeholder="Email" id="login-email">
<input type="password" placeholder="Password" id="login-password">
<button type="submit">Login</button>
<div class="error" id="login-error"></div>
</form>
<form id="register-form">
<h2>Register</h2>
<input type="text" placeholder="Full Name" id="register-name">
<input type="email" placeholder="Email" id="register-email">
<input type="password" placeholder="Password" id="register-password">
<button type="submit">Register</button>
<div class="error" id="register-error"></div>
</form>
<script>
// Login form submission
document.getElementById('login-form').addEventListener('submit', function(e) {
e.preventDefault();
// Get form data
var email = document.getElementById('login-email').value;
var password = document.getElementById('login-password').value;
// Validate form data
if (!email || !password) {
document.getElementById('login-error').innerHTML = 'Please enter an email and password';
return;
}
// Submit form
// TODO: Add AJAX request to server
console.log('Logging in...');
});
// Register form submission
document.getElementById('register-form').addEventListener('submit', function(e) {
e.preventDefault();
// Get form data
var name = document.getElementById('register-name').value;
var email = document.getElementById('register-email').value;
var password = document.getElementById('register-password').value;
// Validate form data
if (!name || !email || !password) {
document.getElementById('register-error').innerHTML = 'Please enter your full name, email, and password';
return;
}
// Submit form
// TODO: Add AJAX request to server
console.log('Registering...');
});
</script>
</body>
</html>
```
注意:这只是一个简单的示例。在实际应用中,需要对表单数据进行更严格的验证,并使用安全的密码存储方案。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.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)