<input type="password" name="pwd" class="form-control form-control-lg" id="password" placeholder="密码" />
时间: 2023-11-11 16:18:07 浏览: 196
这是一个 HTML 中的密码输入框,其中“type="password"”表示输入的内容以密码形式显示,不可见;“name="pwd"”表示该输入框的名称为“pwd”;“class="form-control form-control-lg"”表示该输入框应用了 Bootstrap 框架中的表单控件样式;“id="password"”表示该输入框的唯一标识符为“password”;“placeholder="密码"”表示在该输入框中未输入任何内容时显示的提示文字为“密码”。
相关问题
给以下代码添加点击提交后跳转至新界面的功能<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>用户注册</title> </head> <body> <p align="center"> <font size=" 4" color="#FF3300">用户注册</font> </p> <form id="form1" name="form1" method="post" action="addUserServlet"> <table width="340" border="0" align="center"> <tr> <td width="150">卡号:</td> <td width="189"><label> <input name="user" type="text" id="user" /> </label></td> </tr> <tr> <td>密码:</td> <td><label> <input name="pwd" type="password" id="pwd" /> </label></td> </tr> <tr> <td>重输密码:</td> <td><label> <input name="pwd1" type="password" id="pwd1" /> </label></td> </tr> <tr> <td>账户名:</td> <td><label> <input name="name" type="text" id="name" /> </label></td> </tr> <tr> <td><label> <input type="submit" name="Submit" value="提交" /> </label></td> <td><label> <input type="reset" name="Submit2" value="重置" /> </label></td> </tr> </table> </form> </body> </html>
您可以将以下代码添加到表单中的“提交”按钮中,以实现点击提交后跳转到新页面的功能:
```html
<input type="submit" name="Submit" value="提交" onclick="location.href='new_page.jsp'"/>
```
在这里,我们使用了JavaScript的`location.href`属性将页面重定向到`new_page.jsp`页面。您可以将其替换为您想要跳转的页面的URL。
完整的代码如下所示:
```html
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户注册</title>
</head>
<body>
<p align="center">
<font size=" 4" color="#FF3300">用户注册</font>
</p>
<form id="form1" name="form1" method="post" action="addUserServlet">
<table width="340" border="0" align="center">
<tr>
<td width="150">卡号:</td>
<td width="189"><label>
<input name="user" type="text" id="user" />
</label></td>
</tr>
<tr>
<td>密码:</td>
<td><label>
<input name="pwd" type="password" id="pwd" />
</label></td>
</tr>
<tr>
<td>重输密码:</td>
<td><label>
<input name="pwd1" type="password" id="pwd1" />
</label></td>
</tr>
<tr>
<td>账户名:</td>
<td><label>
<input name="name" type="text" id="name" />
</label></td>
</tr>
<tr>
<td><label>
<input type="submit" name="Submit" value="提交" onclick="location.href='new_page.jsp'"/>
</label></td>
<td><label>
<input type="reset" name="Submit2" value="重置" />
</label></td>
</tr>
</table>
</form>
</body>
</html>
```
<!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>
```
阅读全文