hbuilder登录按钮实现代码
时间: 2023-10-03 20:08:15 浏览: 47
以下是登录按钮的实现代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录页面</title>
<style type="text/css">
.container {
width: 400px;
margin: 0 auto;
padding-top: 100px;
}
h2 {
text-align: center;
margin-bottom: 20px;
}
form {
text-align: center;
}
input[type="text"], input[type="password"] {
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: none;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0,0,0,0.3);
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #3e8e41;
}
</style>
</head>
<body>
<div class="container">
<h2>欢迎登录</h2>
<form onsubmit="return login()">
<input type="text" name="username" id="username" placeholder="用户名">
<input type="password" name="password" id="password" placeholder="密码">
<input type="submit" value="登录">
</form>
</div>
<script type="text/javascript">
function login() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
// 在这里编写登录的逻辑代码
// 如果登录成功,返回 true,否则返回 false
alert("用户名:" + username + ",密码:" + password);
return false; // 防止表单提交
}
</script>
</body>
</html>
```
以上代码在登录按钮的 form 元素上绑定了一个 onsubmit 事件,当用户点击登录按钮时,会触发该事件。在事件处理函数 login() 中,我们通过 document.getElementById() 获取了用户名和密码输入框中的值,并在这里编写了登录的逻辑代码。在这里,我们只是简单地使用 alert() 弹出了输入的用户名和密码,你需要在这里编写真正的登录逻辑。最后,我们返回 false,防止表单提交。