零基础学习HTML(16)——labal标签、fieldset标签、legend标签、select标签、option标签、optgroup标签

Dragon水魅

发布于 2026-01-23 18:51:59

1190

注：学习笔记基于小甲鱼学习视频，官方论坛： https://fishc.com.cn/forum.php

官方资料

鱼C课程案例库：https://ilovefishc.com/html5/ html5速查手册：https://man.ilovefishc.com/html5/ css速查手册：https://man.ilovefishc.com/css3/

学习正文

label标签：https://man.ilovefishc.com/pageHTML5/label.html fieldset标签：https://man.ilovefishc.com/pageHTML5/fieldset.html legend标签：https://man.ilovefishc.com/pageHTML5/legend.html select标签：https://man.ilovefishc.com/pageHTML5/select.html option标签：https://man.ilovefishc.com/pageHTML5/option.html optgroup标签：https://man.ilovefishc.com/pageHTML5/optgroup.html

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上:

<!DOCTYPE html>
<html>
<head>
    <title>第十五节课</title>
    <meta charset="utf-8">
	<title>一个最简单的表单</title>
</head>
<body>
	<form action="welcome.php" method="post">
		<!-- 使用 label 标签将文本包裹起来 -->
		<label>名字：<input type="text" name="name"></label><br><br>
		<label>邮箱：<input type="text" name="email"></label><br><br>
		<button type="submit">提交</button>
	</form>
</body>
</html>

使用以下代码也可以达到同样的效果：

<!DOCTYPE html>
<html>
<head>
    <title>第十五节课</title>
    <meta charset="utf-8">
	<title>一个最简单的表单</title>
</head>
<body>
	<form action="welcome.php" method="post">
		<!-- 使用 label 标签的 for 属性关联另一个元素的 id 属性 -->
		<label for="name">名字：</label><input type="text" name="name" id="name"><br><br>
		<label for="email">邮箱：</label><input type="text" name="email" if="email"><br><br>
		<button type="submit">提交</button>
	</form>
</body>
</html>

可以使用 fieldset 标签来划分不同的表单元素：

<!DOCTYPE html>
<html>
<head>
    <title>第十五节课</title>
    <meta charset="utf-8">
	<title>一个最简单的表单</title>
</head>
<body>
	<form action="welcome.php" method="post">
		<!-- 使用 fieldset 划分不同类型的表单元素 -->
		<fieldset>
			<label for="name">名字：</label><input type="text" name="name" id="name"><br><br>
			<label for="email">邮箱：</label><input type="text" name="email" if="email"><br><br>
		</fieldset>
		<p>为了提供更好的服务，请填写以下内容</p>
		<fieldset>
			<label for="q1">您是否使用鱼C论坛：</label><input type="text" name="age" id="age"><br><br>
			<label for="q2">使用鱼C论坛的目的是：</label><input type="text" name="age" id="age"><br><br>
			<label for="q3">使用鱼C论坛的频率是:</label><input type="text" name="age" id="age">
		</fieldset>
		<br>
		<button type="submit">提交</button>
	</form>
</body>
</html>

legend 标签用于定义 fieldset 标签内的说明文字（legend 必须是 fieldset 的第一个子元素）：

<!DOCTYPE html>
<html>
<head>
    <title>第十五节课</title>
    <meta charset="utf-8">
	<title>一个最简单的表单</title>
</head>
<body>
	<form action="welcome.php" method="post">
		<!-- 使用 fieldset 划分不同类型的表单元素 -->
		<fieldset>
		<legend>基本信息</legend>
			<label for="name">名字：</label><input type="text" name="name" id="name"><br><br>
			<label for="email">邮箱：</label><input type="text" name="email" if="email"><br><br>
		</fieldset>
		<p>为了提供更好的服务，请填写以下内容</p>
		<fieldset>
		<legend>调查内容</legend>
			<label for="q1">您是否使用鱼C论坛：</label><input type="text" name="age" id="age"><br><br>
			<label for="q2">使用鱼C论坛的目的是：</label><input type="text" name="age" id="age"><br><br>
			<label for="q3">使用鱼C论坛的频率是:</label><input type="text" name="age" id="age">
		</fieldset>
		<br>
		<button type="submit">提交</button>
	</form>
</body>
</html>

可以通过 select 标签和 option 标签实现一个下拉列表：

<!DOCTYPE html>
<html>
<head>
    <title>第十五节课</title>
    <meta charset="utf-8">
	<title>一个最简单的表单</title>
</head>
<body>
	<form action="welcome.php" method="post">
		<!-- 使用 fieldset 划分不同类型的表单元素 -->
		<fieldset>
		<legend>基本信息</legend>
			<label for="name">名字：</label><input type="text" name="name" id="name"><br><br>
			<label for="sex">性别：
				<select name="sex">
					<option value="male">男</option>
					<option value="female">女</option>
				</select>
			</label><br><br>
			<label for="email">邮箱：</label><input type="text" name="email" if="email"><br><br>
		</fieldset>
		<p>为了提供更好的服务，请填写以下内容</p>
		<fieldset>
		<legend>调查内容</legend>
			<label for="q1">您是否使用鱼C论坛：</label><input type="text" name="age" id="age"><br><br>
			<label for="q2">使用鱼C论坛的目的是：</label><input type="text" name="age" id="age"><br><br>
			<label for="q3">使用鱼C论坛的频率是:</label><input type="text" name="age" id="age">
		</fieldset>
		<br>
		<button type="submit">提交</button>
	</form>
</body>
</html>

使用 optgroup 标签实现下拉表单的分组：

<!DOCTYPE html>
<html>
<head>
    <title>第十五节课</title>
    <meta charset="utf-8">
	<title>一个最简单的表单</title>
</head>
<body>
	<p>小甲鱼的课程</p>
	<!-- 使用optgroup 元素对选项进行分组 -->
	<select>
		<optgroup label="《python》">
			<option value="1">NO.1</option>
			<option value="2">NO.2</option>
			<option value="3">NO.3</option>
		</optgroup>
		<optgroup label="《C语言》">
			<option value="4">NO.4</option>
			<option value="5">NO.5</option>
			<option value="6">NO.6</option>
		</optgroup>
		<optgroup label="《Java》">
			<option value="7">NO.7</option>
			<option value="8">NO.8</option>
			<option value="9">NO.9</option>
		</optgroup>
	</select>
</body>
</html>