js登录注册页面代码html
时间: 2024-06-30 09:00:27 浏览: 84
JavaScript 通常用于处理前端的交互,包括登录和注册表单验证,但HTML 是负责结构化页面内容的基础。下面是一个简单的登录和注册表单的 HTML 示例,我们将使用 JavaScript 来添加一些基本的交互:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login & Registration</title>
<style>
.form-container {
max-width: 300px;
margin: auto;
padding: 20px;
}
</style>
</head>
<body>
<div class="form-container">
<!-- 登录部分 -->
<h2>Login</h2>
<form id="loginForm">
<input type="text" id="username" placeholder="Username" required>
<input type="password" id="password" placeholder="Password" required>
<button type="submit">Login</button>
</form>
<!-- 注册部分 -->
<h2>Register</h2>
<form id="registerForm">
<input type="text" id="newUsername" placeholder="Username" required>
<input type="email" id="email" placeholder="Email" required>
<input type="password" id="newPassword" placeholder="Password" required>
<button type="submit">Register</button>
</form>
<script src="login-register.js"></script>
</div>
</body>
</html>
```
```javascript
// login-register.js (简化版示例)
document.getElementById('loginForm').addEventListener('submit', function(e) {
e.preventDefault();
// 这里可以添加登录验证,实际应用中可能需要后端API接口
console.log('Submitting login form with username:', document.getElementById('username').value);
});
document.getElementById('registerForm').addEventListener('submit', function(e) {
e.preventDefault();
// 这里可以添加注册验证,同样可能需要后端接口
console.log('Submitting register form with email:', document.getElementById('email').value);
});
```
阅读全文