这段代码中的两个按钮是没有任何功能的，需要添加
JavaScript 代码来实现点击后的反应。可以使用 addEventListener 方法来监听按钮的点击事件，然后在回调函数中添加相应的逻辑代码。例如，可以在确定按钮被点击时弹出一个提示框，
显示用户填写的信息，而在重置按钮被点击时清空表单中的所有内容。以下是示例代码：
```
<!DOC
TYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2</title>
</head>
<body>
<form>
账户:<
input type="text" name="user">
<br>
密码:<
input type="password" name="pwd">
</form>
<form action="">
<p1>性别:</p1>
<
input type="radio" name="sex"
value="male">男
<
input type="radio" name="sex"
value="female">女
</form>
<form>
<p1>兴趣:</p1>
<
input type="
checkbox" name="interest"
value="Front-end development">前端开发
<
input type="
checkbox" name="interest"
value="Back-end development">后端开发
<
input type="
checkbox" name="interest"
value="Art">美工
</form>
<form action="">
<p1>学历:</p1>
<select name="Education">
<option
value="Bachelor degree or below">本科以下</option>
<option
value="Bachelor degree">本科毕业</option>
<option
value="Master degree">硕士毕业</option>
<option
value="Ph. D. graduate">博士毕业</option>
</select>
</form>
<h11>个人简介:</h11>
<br>
<textarea rows="10" cols="50">
在这里输入内容...
</textarea>
<form action="">
<
input type="button"
value="确定" id="submitBtn">
<
input type="button"
value="重置" id="resetBtn">
</form>
<script>
var submitBtn = document.getElementById("submitBtn");
var resetBtn = document.getElementById("resetBtn");
submitBtn.addEventListener("click", function() {
var user = document.getElementsByName("user")[0].
value;
var pwd = document.getElementsByName("pwd")[0].
value;
var sex = document.getElementsByName("sex")[0].checked ? "男" : "女";
var interests = [];
var interestElems = document.getElementsByName("interest");
for (var i = 0; i < interestElems.length; i++) {
if (interestElems[i].checked) {
interests.push(interestElems[i].
value);
}
}
var education = document.getElementsByName("Education")[0].
value;
var intro = document.getElementsByTagName("textarea")[0].
value;
var msg = "账户：" + user + "\n密码：" + pwd + "\n性别：" + sex + "\n兴趣：" + interests.join(", ") + "\n学历：" + education + "\n个人简介：" + intro;
alert(msg);
});
resetBtn.addEventListener("click", function() {
document.getElementsByName("user")[0].
value = "";
document.getElementsByName("pwd")[0].
value = "";
document.getElementsByName("sex")[0].checked = true;
document.getElementsByName("interest")[0].checked = false;
document.getElementsByName("interest")[1].checked = false;
document.getElementsByName("interest")[2].checked = false;
document.getElementsByName("Education")[0].selected = true;
document.getElementsByTagName("textarea")[0].
value = "在这里输入内容...";
});
</script>
</body>
</html>
```
本文解释了如何在HTML中使用<label>标签与<inputtype=checkbox>关联，以便在Vue.js中正确显示city.cityName。强调了自闭合标签的用途和如何确保数据绑定有效。
扫一扫
192
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
