我想要做一个关于未来工匠Future craftsman的网页,给我一个登录注册页面的代码
时间: 2024-09-23 18:02:26 浏览: 24
创建一个简单的登录注册页面的HTML、CSS和JavaScript代码示例可以这样开始。这个例子是基础的,并假设你正在使用HTML5、Bootstrap框架以及本地存储作为简易的用户管理:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Future Craftsman 登录/注册</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container mt- 注册/登录</h2>
<div id="login-form" style="display:none;">
<form>
<label for="username">用户名:</label>
<input type="text" id="username" class="form-control">
<label for="password">密码:</label>
<input type="password" id="password" class="form-control">
<button onclick="login()" class="btn btn-primary">登录</button>
<button onclick="showRegisterForm()" class="btn btn-secondary">注册</button>
</form>
</div>
<div id="register-form" style="display:none;">
<form>
<label for="reg_username">用户名:</label>
<input type="text" id="reg_username" class="form-control">
<label for="reg_password">密码:</label>
<input type="password" id="reg_password" class="form-control">
<button onclick="register()" class="btn btn-primary">注册</button>
<button onclick="showLoginForm()" class="btn btn-secondary">登录</button>
</form>
</div>
</div>
<script>
function login() {
// 这里只是一个示例,实际应用应连接到服务器验证
}
function register() {
// 这里也是一个示例,保存数据可以用localStorage或其他持久化技术
localStorage.setItem('username', document.getElementById('reg_username').value);
}
function showLoginForm() {
document.getElementById('login-form').style.display = 'block';
document.getElementById('register-form').style.display = 'none';
}
function showRegisterForm() {
document.getElementById('login-form').style.display = 'none';
document.getElementById('register-form').style.display = 'block';
}
</script>
</body>
</html>
```
注意:这是一个非常简化的示例,实际生产环境中你需要连接数据库、处理表单验证、添加错误提示等。同时,为了安全起见,不应直接将用户密码存储在浏览器的本地存储中。