纯前端登录注册怎么写,代码示例
时间: 2024-04-13 08:27:46 浏览: 10
对于纯前端的登录注册功能,你可以使用 HTML、CSS 和 JavaScript 来实现。以下是一个简单的示例:
HTML:
```html
<!DOCTYPE html>
<html>
<head>
<title>登录注册示例</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="container">
<h1>登录</h1>
<form id="loginForm">
<input type="text" id="username" placeholder="用户名">
<input type="password" id="password" placeholder="密码">
<button type="submit">登录</button>
</form>
<h1>注册</h1>
<form id="registerForm">
<input type="text" id="newUsername" placeholder="用户名">
<input type="password" id="newPassword" placeholder="密码">
<button type="submit">注册</button>
</form>
</div>
<script src="script.js"></script>
</body>
</html>
```
CSS(style.css):
```css
.container {
text-align: center;
margin-top: 100px;
}
h1 {
color: #333;
}
input {
padding: 10px;
margin-top: 10px;
}
button {
padding: 10px 20px;
background-color: #333;
color: #fff;
border: none;
cursor: pointer;
}
```
JavaScript(script.js):
```javascript
// 登录表单提交事件
document.getElementById("loginForm").addEventListener("submit", function(event) {
event.preventDefault(); // 阻止表单默认提交行为
// 获取输入的用户名和密码
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
// 在此处添加登录逻辑
console.log("用户名: " + username);
console.log("密码: " + password);
// 清空输入框
document.getElementById("username").value = "";
document.getElementById("password").value = "";
});
// 注册表单提交事件
document.getElementById("registerForm").addEventListener("submit", function(event) {
event.preventDefault(); // 阻止表单默认提交行为
// 获取输入的用户名和密码
var newUsername = document.getElementById("newUsername").value;
var newPassword = document.getElementById("newPassword").value;
// 在此处添加注册逻辑
console.log("新用户名: " + newUsername);
console.log("新密码: " + newPassword);
// 清空输入框
document.getElementById("newUsername").value = "";
document.getElementById("newPassword").value = "";
});
```
上述代码演示了一个简单的登录注册页面,通过 JavaScript 监听表单的提交事件,获取用户输入的用户名和密码,并在控制台输出。你可以根据实际需求,将登录注册的逻辑补充完整。