<form action="#" method="post"><input type="radio" name="university" value="清华大学" checked>清华大学</in
时间: 2024-07-07 18:00:23 浏览: 104
这段HTML代码定义了一个简单的表单,用于让用户选择大学。以下是它的解释:
- `<form>`: 表单元素,它是网页中用户输入数据的主要容器,通常用于提交到服务器处理。
- `action="#"`: 表示当用户提交表单时,数据将发送到当前页面(即同页提交)而不是其他指定的URL。
- `method="post"`: 定义了表单提交的方式,`post`方法会将数据包含在请求体中,通常用于敏感信息,如登录密码。
- `<input type="radio" name="university" value="清华大学" checked>`: 单选按钮,用户可以选择一个选项。`name="university"`表示这些单选按钮属于同一个组,`value="清华大学"`是这个按钮的值,`checked`属性表示默认选中清华大学。
用户填写后,如果点击提交,表单会选择清华大学作为默认选项,并将其值(清华大学)发送给服务器处理,但因为`action="#"`,实际操作取决于表单的其他处理逻辑,可能就在当前页面进行某种处理。
相关问题
<!DOCTYPE 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="确定"> <input type="button" value="重置"> </form> </body> </html>使这段代码中的两个按钮点击后有反应
这段代码中的两个按钮是没有任何功能的,需要添加 JavaScript 代码来实现点击后的反应。可以使用 addEventListener 方法来监听按钮的点击事件,然后在回调函数中添加相应的逻辑代码。例如,可以在确定按钮被点击时弹出一个提示框,显示用户填写的信息,而在重置按钮被点击时清空表单中的所有内容。以下是示例代码:
```
<!DOCTYPE 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>
```
<table> <form action="updatePerson.do?personId=${sessionScope.updateById.personId}" method="post"> <tr> <td>姓名:</td> <td><input type="text" name="personName" value="${sessionScope.updateById.personName}"></td> </tr> <tr> <td>称呼:</td> <td> <input type="text" name="personNickName" value="${sessionScope.updateById.personNickName}"></td> </tr> <tr> <td>性别:</td> <td><input type="radio" name="personSex" value="${sessionScope.updateById.personSex}">男<input type="radio" name="personSex" value="${sessionScope.updateById.personSex}">女</td> </tr> <tr> <td> 类别:</td> <td><input type="text" name="kindId" value="${sessionScope.updateById.kindId}"></td> </tr> <tr> <td>生日:</td> <td><input type="text" name="personBirthday" value="${sessionScope.updateById.personBirthday}"></td> </tr> <tr> <td>电话:</td> <td><input type="text" name="personTelephone" value="${sessionScope.updateById.personTelephone}"></td> </tr> <tr> <td>QQ:</td> <td> <input type="text" name="personQQ" value="${sessionScope.updateById.personQQ}"></td> </tr> <tr> <td> 邮箱:</td> <td><input type="text" name="personEmail" value="${sessionScope.updateById.personEmail}"></td> </tr> <tr> <td> 地址:</td> <td> <input type="text" name="personAddress" value="${sessionScope.updateById.personAddress}"></td> </tr> <tr> <td> MSN:</td> <td><input type="text" name="personMSN" value="${sessionScope.updateById.personMSN}"></td> </tr> <tr> <td> 简介:</td> <td><textarea cols="10" rows="5" name="personInfo">${sessionScope.updateById.personInfo}</textarea></td> </tr> <tr> <td><input type="submit" name="重填" value="重填"></td> <td><input type="submit" name="提交" value="提交"></td> </tr> </form> </table>为上述代码设计简单分格的ss和js代码
以下是简单的HTML和JavaScript代码:
HTML代码:
```html
<table>
<form id="updateForm" action="updatePerson.do?personId=${sessionScope.updateById.personId}" method="post">
<tr>
<td>姓名:</td>
<td><input type="text" name="personName" value="${sessionScope.updateById.personName}"></td>
</tr>
<tr>
<td>称呼:</td>
<td><input type="text" name="personNickName" value="${sessionScope.updateById.personNickName}"></td>
</tr>
<tr>
<td>性别:</td>
<td>
<input type="radio" name="personSex" value="男" checked>男
<input type="radio" name="personSex" value="女">女
</td>
</tr>
<tr>
<td> 类别:</td>
<td><input type="text" name="kindId" value="${sessionScope.updateById.kindId}"></td>
</tr>
<tr>
<td>生日:</td>
<td><input type="text" name="personBirthday" value="${sessionScope.updateById.personBirthday}"></td>
</tr>
<tr>
<td>电话:</td>
<td><input type="text" name="personTelephone" value="${sessionScope.updateById.personTelephone}"></td>
</tr>
<tr>
<td>QQ:</td>
<td><input type="text" name="personQQ" value="${sessionScope.updateById.personQQ}"></td>
</tr>
<tr>
<td> 邮箱:</td>
<td><input type="text" name="personEmail" value="${sessionScope.updateById.personEmail}"></td>
</tr>
<tr>
<td> 地址:</td>
<td><input type="text" name="personAddress" value="${sessionScope.updateById.personAddress}"></td>
</tr>
<tr>
<td> MSN:</td>
<td><input type="text" name="personMSN" value="${sessionScope.updateById.personMSN}"></td>
</tr>
<tr>
<td> 简介:</td>
<td><textarea cols="10" rows="5" name="personInfo">${sessionScope.updateById.personInfo}</textarea></td>
</tr>
<tr>
<td><input type="button" name="重填" value="重填" onclick="resetForm()"></td>
<td><input type="button" name="提交" value="提交" onclick="submitForm()"></td>
</tr>
</form>
</table>
```
JavaScript代码:
```javascript
function resetForm() {
document.getElementById("updateForm").reset();
}
function submitForm() {
var form = document.getElementById("updateForm");
if (form.checkValidity()) {
form.submit();
} else {
alert("请完善所有信息!");
}
}
```
其中,resetForm()函数用于重置表单,submitForm()函数用于提交表单。在submitForm()函数中,我们使用了form.checkValidity()方法来检查表单是否完整,如果表单完整,则使用form.submit()方法提交表单,否则弹出提示框提醒用户完善表单信息。