HTML表单控件详解-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_37589387/article/details/88654754

本文介绍了HTML中常见的表单控件，包括隐藏域、下拉列表框、多行列表框以及一般按钮和提交按钮的用途和语法。隐藏域用于在用户不可见的情况下发送信息；下拉列表框提供有限选项，一次选一；多行列表框允许多选；一般按钮常与脚本配合使用；提交按钮则用于将表单数据发送到服务器。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

隐藏域：

作用：用来收集或发送信息，对于网页的访问者来说，隐藏域是看不见的。当表单被提交的时候，隐藏域就会将信息，如果普通文本框一样将名称（name）和值（value）发送到服务器上。语法示例<input type="hidden" value="25" name="counts" />

属性说明:1.type="hidden"定义隐藏域。2.value=“25”隐藏域的默认值，一般由程序动态改变，其他同文本输入框。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form action=" " method="post" name="myform">
			隐藏域：<input type="hidden" value="25" name="counts" />
		</form>
	</body>
</html>

下拉列表框：

作用：在有限的网页空间内为用户提供多个选项，但每次只能选择一个。如年份、年级等。

语法示例：<select name ="gradeList"><option value="class1" selected>软件一班</option> <option value ="class2">软件二班</option> <option value="class3" >软件三班</option> </select>

属性说明：1.<option>表示选择项，至少有一个该标签。2.value=“class1” 被选中时该值用于传递给服务器

3.selected表示该项默认被选中

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form action="" method="post" name="myform">
			选择班级：<select name = "gradeList">
				<option value="class1" selected>软件一班</option>
				<option value="class2">软件二班</option>
				<option value="class3">软件三班</option>
			</select>
		</form>
	</body>
</html>

多行列表框：

作用：用户提供多个选项，但每次可选多个。

语法示例：<select name="gradeList" size="3" multiple> <option value="class1" selected>软件一班</option>

属性说明：1.size=“3” 定义显示的列表项，当列表项多于该值时出现滚动条。2.multipe表示一次可选选择多个内容项，选择多项时，按住Ctrl键即可。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form action="" method="post" name="myform">
			选择班级：<select name = "gradeList">
				<option value="class1" selected>软件一班</option>
				<option value="class2">软件二班</option>
				<option value="class3">软件三班</option>
			</select>
			选择班级：<select name="gradelist" size="3" multiple>
				<option value="class1" selected>软件一班</option>
				<option value="class2">软件二班</option>
				<option value="class3">软件三班</option>
				<option value="class4">软件四班</option>
			</select>
		</form>
	</body>
</html>

一般按钮

作用：一般按钮通常用来和脚本一起工作。

语法示例：<input type="button" value="一般按钮" name="btnTest" οnclick="javascript:alert('一般按钮测试')" />

说明：1.type=“button” 定义该标签为一般按钮2.name=“btnTest” 定义按钮的名称。3.value="一般按钮” 定义按钮显示的文本

4.Onclick表示按钮的事件，用于调用JS写的函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form action="" method="post" name="myform">
			<input type="button" value="按钮" name="btnTest" Onclick="javascript:alert('一般测试按钮')" />
		</form>
	</body>
</html>

提交按钮：

作用：提交按钮用来完成表单的提交工作。

语法示例：<input type="submit" value="提交按钮" name="btnTest” />

说明：1.type=“submit” 定义该标签为提交按钮。2.name="btnTest" 定义按钮的名称。3.value="提交按钮" 定义按钮显示的文本

提交按钮被点击时将当前表单中可提交的信息发送到action指向的服务端

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form action="" method="post" name="myform">
			<input type="button" value="按钮" name="btnTest" Onclick="javascript:alert('一般测试按钮')" />
			<input type="submit" value="提交按钮" name="btnTest" />
		</form>
	</body>
</html>