1、Form 表单
表单是一个包含表单元素的区域。主要作用就是向服务器提交数据。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form表单</title>
</head>
<body>
<form action="a.jsp" method="get">
里面是具体的表单内容
</form>
</body>
</html>
2、文本表单
(1)文本框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本框</title>
</head>
<body>
<form action="a.jsp" method="get">
用户名:<input type="text" id="userName" name="userName"/>
</form>
</body>
</html>
运行结果:
(2)密码框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>密码框</title>
</head>
<body>
<form action="a.jsp" method="get">
<table>
<tr>
<td>
用户名:
</td>
<td>
<input type="text" id="userName" name="userName"/>
</td>
</tr>
<tr>
<td>
密码:
</td>
<td>
<input type="password" id="pwd" name="pwd"/>
</td>
</tr>
</table>
<br/>
</form>
</body>
</html>
运行结果:
(3)文本域
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文本域</title>
</head>
<body>
<form action="a.jsp" method="get">
<table>
<tr>
<td>
用户名:
</td>
<td>
<input type="text" id="userName" name="userName"/>
</td>
</tr>
<tr>
<td>
密码:
</td>
<td>
<input type="password" id="pwd" name="pwd"/>
</td>
</tr>
<tr>
<td colspan="2">
<textarea id="desc" name="desc" rows="10" cols="30"></textarea>
</td>
</tr>
</table>
<br/>
</form>
</body>
</html>
运行结果:
3、单选框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>单选框</title>
</head>
<body>
性别:<input type="radio" name="sex" />男
<input type="radio" name="sex" checked="checked"/>女
</body>
</html>
运行结果:
4、复选框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>复选框</title>
</head>
<body>
性别:<input type="radio" name="sex" />男
<input type="radio" name="sex" checked="checked"/>女<br/>
兴趣:
<input type="checkbox" name="hobby" />唱歌
<input type="checkbox" name="hobby" />跳舞
<input type="checkbox" name="hobby" checked="checked"/>游泳
</body>
</html>
运行结果:
5、下拉框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉框</title>
</head>
<body>
性别:<input type="radio" name="sex" />男
<input type="radio" name="sex" checked="checked"/>女<br/>
兴趣:
<input type="checkbox" name="hobby" />唱歌
<input type="checkbox" name="hobby" />跳舞
<input type="checkbox" name="hobby" checked="checked"/>游泳
<br/>
年级:
<select id="grade" name="grade">
<option value="1">一年级</option>
<option value="2">二年级</option>
<option value="3">三年级</option>
</select>
</body>
</html>
运行结果:
6、按钮
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>按钮</title>
</head>
<body>
<form action="a.jsp" method="get">
<table>
<tr>
<td>
用户名:
</td>
<td>
<input type="text" id="userName" name="userName"/>
</td>
</tr>
<tr>
<td>
密码:
</td>
<td>
<input type="password" id="pwd" name="pwd"/>
</td>
</tr>
<tr>
<td>
<input type="submit" value="登录"/>
</td>
<td>
<input type="button" value="重置"/>
</td>
</tr>
</table>
<br/>
</form>
</body>
</html>
运行结果:
7、文件上传
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>文件上传</title>
</head>
<body>
<input type="file" id="f" name="f"/>
</body>
</html>
运行结果: