用html5编写一个登录业务,用户输入姓名密码,点击登录按钮控制台打印用户名和密码
时间: 2024-09-29 17:13:16 浏览: 31
在HTML5中构建一个简单的登录表单,你可以创建以下结构:
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>简单登录页面</title>
</head>
<body>
<form id="loginForm">
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password" required><br>
<button type="submit">登录</button>
</form>
<script>
// 获取表单元素
const loginForm = document.getElementById('loginForm');
const usernameInput = document.getElementById('username');
const passwordInput = document.getElementById('password');
// 表单提交事件处理器
loginForm.addEventListener('submit', function(event) {
event.preventDefault(); // 阻止表单默认提交行为
// 获取输入值
const username = usernameInput.value;
const password = passwordInput.value;
// 打印到控制台
console.log("用户名:", username);
console.log("密码:", "已隐藏"); // 对密码进行安全处理,这里仅作示例
// 可以在此处添加实际的验证逻辑,然后根据结果发送AJAX请求或执行其他操作
});
</script>
</body>
</html>
```
在这个例子中,当用户点击登录按钮时,会阻止表单的默认提交行为,并从文本框获取用户名和密码。密码字段为了安全原因通常不会直接显示,而是会在控制台中显示为“已隐藏”。实际应用中,你需要加入验证逻辑并考虑安全性措施。
阅读全文