javascript用HBuilder实现登录界面代码一个按钮实现提交功能一个按钮实现重置?

如题所述

下面是一个使用 JavaScript 和 HTML 实现登录界面的示例代码,其中包括一个提交按钮和一个重置按钮:
<!DOCTYPE html>
<html>
<head>
<title>Login Page</title>
<script>
function submitForm() {
// 获取用户名和密码输入框的值
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
// 在这里可以进行登录验证逻辑

// 示例:打印用户名和密码到控制台
console.log("Username: " + username);
console.log("Password: " + password);
}
function resetForm() {
// 将用户名和密码输入框的值重置为空
document.getElementById("username").value = "";
document.getElementById("password").value = "";
}
</script>
</head>
<body>
<h1>Login Page</h1>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br><br>
<button type="button" onclick="submitForm()">Submit</button>
<button type="button" onclick="resetForm()">Reset</button>
</form>
</body>
</html>
在上述代码中,我们定义了两个 JavaScript 函数:`submitForm` 和 `resetForm`。`submitForm` 函数用于获取用户名和密码输入框的值,并在控制台打印出来,你可以在该函数中添加实际的登录验证逻辑。`resetForm` 函数用于将用户名和密码输入框的值重置为空。
在 HTML 部分,我们使用 `<form>` 元素创建一个登录表单,并为用户名和密码输入框添加相应的标签和 ID。通过在提交按钮和重置按钮上添加 `onclick` 属性,我们将按钮点击事件与 JavaScript 函数关联起来。
你可以将上述代码复制到 HBuilder 中的 HTML 文件中,然后在浏览器中运行该文件,即可看到登录界面和按钮的功能。
温馨提示:答案为网友推荐,仅供参考