HTML-表单-CSDN博客

本文链接：https://blog.csdn.net/cc098818/article/details/99309510

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>

运行结果：
在这里插入图片描述