html js实现登录注册
时间: 2023-07-18 19:20:47 浏览: 47
好的,我可以为您提供一个简单的 HTML 和 JavaScript 登录注册表单的示例。
HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>Login/Register Form</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>Login/Register Form</h1>
<!-- 登录表单 -->
<form id="login-form" style="display: block;">
<label for="login-username">Username</label>
<input type="text" id="login-username" name="login-username">
<label for="login-password">Password</label>
<input type="password" id="login-password" name="login-password">
<button type="submit">Login</button>
</form>
<!-- 注册表单 -->
<form id="register-form" style="display: none;">
<label for="register-username">Username</label>
<input type="text" id="register-username" name="register-username">
<label for="register-password">Password</label>
<input type="password" id="register-password" name="register-password">
<button type="submit">Register</button>
</form>
<!-- 切换表单按钮 -->
<button id="toggle-form">Register</button>
<!-- 提示信息 -->
<div id="message"></div>
</body>
</html>
```
JavaScript 代码:
```javascript
// 切换表单
$('#toggle-form').click(function() {
$('#login-form, #register-form').toggle();
if ($(this).text() == 'Register') {
$(this).text('Login');
} else {
$(this).text('Register');
}
});
// 登录表单提交
$('#login-form').submit(function(event) {
event.preventDefault();
var username = $('#login-username').val();
var password = $('#login-password').val();
// TODO: 发送登录请求
$('#message').text('Logging in...');
});
// 注册表单提交
$('#register-form').submit(function(event) {
event.preventDefault();
var username = $('#register-username').val();
var password = $('#register-password').val();
// TODO: 发送注册请求
$('#message').text('Registering...');
});
```
这是一个非常简单的示例,仅用于演示如何使用 HTML 和 JavaScript 实现登录注册表单。在实际应用中,需要更多的验证和安全措施来确保用户的数据安全。
相关推荐
![](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)