form action="">账号: <input type="text" name="user"><br>密码: <input type="password" name="password"></form>效果如下;
时间: 2024-06-16 11:00:47 浏览: 18
这是一个HTML的表单元素,可以用于在网页上收集用户输入的数据。其中,form标签定义了一个表单,action属性指定了表单提交的URL地址。input标签则定义了两个输入框,一个是文本框,一个是密码框,name属性则指定了输入框的名称,以便在提交表单时能够识别不同的输入框。br标签则是用来进行换行的。
这个表单的效果是显示一个账号输入框和一个密码输入框,用户可以在这里输入自己的账号和密码,然后通过表单提交按钮将这些数据提交到指定的URL上。
相关问题
对<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body> <form action="check.jsp" method=post name=form> 请输入用户名:<input type="text" name="username" value=""><br><br> 请输入密码:<input type="password" name="password" value=""><br><br> <input type="submit" value="确定" name=submit> <input type="reset" value="重填" name=reset><br> </form> </body> </html>进行javabean封装并在jsp中使用
可以将上述HTML代码中的表单数据封装为一个JavaBean对象,如下所示:
```java
public class User {
private String username;
private String password;
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
}
```
然后在JSP页面中使用`request.getParameter()`方法获取表单数据,并将其设置到JavaBean对象中,如下所示:
```java
<%
User user = new User();
user.setUsername(request.getParameter("username"));
user.setPassword(request.getParameter("password"));
%>
```
这样就可以方便地操作表单数据了。可以在JSP页面中使用EL表达式`${user.username}`和`${user.password}`获取用户输入的用户名和密码。例如:
```html
用户名:${user.username}<br>
密码:${user.password}<br>
```
完整的代码如下所示:
```html
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
User user = new User();
user.setUsername(request.getParameter("username"));
user.setPassword(request.getParameter("password"));
%>
用户名:${user.username}<br>
密码:${user.password}<br>
<form action="check.jsp" method="post" name="form">
请输入用户名:<input type="text" name="username" value=""><br><br>
请输入密码:<input type="password" name="password" value=""><br><br>
<input type="submit" value="确定" name="submit">
<input type="reset" value="重填" name="reset"><br>
</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>
```
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body> Login <form action="function.php?action=login" method="post"> 账号:<input type="number" name="user"> 密码:<input type="password" name="password"> 没有账号?点击注册 <input type="submit" value="登录" class="dl"><input type="reset" value="重置" class="cz"> </form> </body> </html>
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
<%-- Created by IntelliJ IDEA. User: syp Date: 2023/5/22 Time: 13:59 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Denglu</title> </head> <body leftmargin="0" topmargin="0" marginheight="0" marginwidth="0"> <fieldset style="width: auto; margin: 0px auto"> <legend> 欢迎使用常州工业职业技术学院人员管理系统 </legend>
<form action="loginSuccess.action"> 用户:<input type="text" name="username"/>
密码:<input type="password" name="password"/>
<input type="submit" value="登录"/> 注册 </form> </fieldset> </body> </html>
<form action="loginSuccess.action"> 用户:<input type="text" name="username"/>
密码:<input type="password" name="password"/>
<input type="submit" value="登录"/> 注册 </form> </fieldset>
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)