【表单标签 02：textarea、button、select、optgroup、option、fieldset、legend、output、progress、meter（含属性详解）】

---

• 快速搜索：涉及知识点比较多，看过之后忘了很正常，想查询时，请按 Ctrl+F 快速搜索关键字哦。搜索后，多次按下 enter 键 或搜索框后的 上下箭头，就能在关键词之间 快速跳转。

---

表单标签

★ 表单标签（表格）

• 规范文档中，目前共 15 个表单标签。（meter、progress 不算严格意义上的表单标签，不能绑定所属表单，但在规范文档中 被划分在 表单元素中）

标签名	用于
<form>	供用户输入的 HTML 表单。 用户输入的容器 ⇒ 收集 用户信息 、向服务器提交数据（用户交互) 。
<label>	控件的 说明标签 = 说明用途。 关联控件：用 for 属性 。 绑定/关联 控件：label.for = "元素.id" 。 搭配 7 个标签：输入标签 <input> (除了 type="hidden"，隐藏值看不见 不需要说明)、 按钮 <button>、 多行文本 <textarea>、下拉列表 <select> 、固定范围的计量器 <meter>、任务进度条 <progress>、输出结果 <output>。
<input>	输入 控件。 ⇒ 收集 “用户输入信息” 、用户交互； 空元素。
<datalist>	建议值 数据列表。仅建议、非强制。 搭配子元素 option[value] 标签； 绑定到 input 标签（属性值相同）：input_list = datalist_id。
<textarea>	多行文本 。 可换行、自由格式、 长文本/ 仅文本； 默认：可换行、可调整文本框宽高、提交值 可保留换行。
<button>	一个按钮。 type属性值：提交数据submit、重置表单reset、自定义功能button。 注：标签内 可嵌套 html 内容。 按钮 显示内容 = 按钮 标签内容 = html 代码 。 ⇒ ✔️ 注：不局限于纯文字、可图像等。 没有标签内容，按钮无显示内容。
<select>	下拉列表（选择一个、多个值）。
<optgroup>	下拉列表的 选项分组 。 必须父元素：select；必需属性：label = “分组名称”。
<option>	下拉列表、建议值列表的 一个选项 。 用于：select / optgroup、datalist 内部。 选项显示内容 优先级： label ＞ 标签内容 ； 提交值 优先级：value ＞ 标签内容。
<fieldset>	表单元素 分组。 显示：围绕 表单中元素的 边框。 表单元素 分组 ⇒ 同类信息 一个组 = 逻辑分组。 用于：表单元素、仅表单元素。 表单分组 标题：legend 标签 = fieldset 第一个子元素。
<legend>	表单分组 标题。 允许父元素：fieldset 。 legend 标签 = fieldset 第一个子元素。
<output>	存放 输出结果 = 计算结果、用户操作结果 。 默认：仅显示、不提交计算结果，即 无提交值； 提交值：可用隐藏值<input type="hidden">同步。
<progress>	显示任务进度 （水平进度条）。 非传统的表单元素、不可绑定表单；仅显示进度、不提交值。
<meter>	简单的计量器 ⇒ 静态的测量结果 = 已知范围的当前值。 必需属性：当前值 value； 默认显示：类似进度条 比例图形，但是静态的； 非传统表单元素、不绑定表单；仅显示 当前值占比、不提交值。
<selectedcontent>（实验标签）	下拉列表 当前选择项的内容 。 （实验标签：浏览器支持度比较差，仅做了解）

---

---

1. textarea： 多行文本 （可换行、自由格式、 长文本/ 仅文本；默认：可换行、可调整文本框宽高、提交值 可保留换行）

• <textarea> ： 是 HTML 表单元素，用于创建多行文本输入区域，允许用户输入大量 自由格式文本。

• 使用选择：允许输入可换行的、自由格式、长的纯文本时，可以使用 多行文本框 <textarea> 。只允许输入一行文本时，选择单行文本框 <input type="text">。

  • 

• 多行文本框 <textarea>核心用途： 处理多行、自由格式的文本输入（如 评论、描述、反馈信息等）。

• 多行文本框 局限性：样式和功能有限，无法用于复杂场景，如 实时富文本编辑：CSDN 的 写博客的编辑器。

  • 复杂场景 ⇒ 需要 基于<div> 等 自定义开发。
  • 多行文本框 <textarea> 只能放“纯文本”：不能放文本之外的东西 如 图片，放 html 代码 也会当成纯文本处理，不会 当前html 代码解析。

---

• 多行文本框 特性：默认可换行（按 Enter 键）、可调整文本框大小、提交值 保留手动换行。
  • 是否允许调整文本框：可通过 CSS 的 调整大小 resize 属性控制。
• 不要对多行文本框 textarea 使用 vertical-align: baseline ：因为 规范中并未明确规定 <textarea> 元素的基线位置，不同浏览器 可能会导致将其设置在不同的位置。

---

• 默认情况下，多行文本框 display: inline-block。看下图， 能看见并非独占一行。
• 
• 

---

---

textarea 标签的 属性（表格）

---

属性名	用途	属性值
name 属性	名称。提交值 必需属性： ⇒ ★不设置name 属性，提交表单时，值就不会被提交。 提交表单：name=value 名称/值对。 ⚠️ <textarea> 不支持 value 属性！不能设置value 属性。 提交的值 = 用户输入的值。	name = “字符串/ 控件名字”。
id	标识 多行文本框。 id 可用于 无障碍访问： ⇒ 把 <textarea> 与 <label> 元素关联。 关联方式：属性值相同 ⇒ label.for = textarea.id 。	id=“字符串”。
cols 属性	可见列数 = 宽度，字符数为单位（= 每行最大字符数）。	属性值：正整数。 以字符数为单位（非精确数值，平均宽度，因字符宽度不一样，如 w、j）。 若未指定，默认值为 cols="20"（约 20 个字符宽）。
rows 属性	可见行数 = 高度，字符数为单位 。	属性值：正整数。 以字符数为单位（非精确数值，平均高度，因字符宽度不一样，如 w、j）。 若未指定，默认值为 rows="2"（约 2 个字符高）。
wrap美/ræp/	提交值中，是否保留 “自动换行”。 设置：视觉上的 自动换行 ⇒ 是否变成 “提交值的 实际换行符”。	属性值： wrap = hard |soft| hard。 ❶ 默认值 = 软换行 = 提交值 不保留自动换行：soft。 ❷ 硬换行 = 提交值 保留自动换行：hard。（Safari、Firefox 不支持hard 属性值）。 ⇒ 浏览器 自动插入换行符(CR+LF)，遇到 cols 设置的宽度边界就换行。 注：hard属性值，必须搭配 cols属性，是根据此属性插入换行符的。 ❸ 不自动换行、超出宽度时 出现水平滚动条：off。 共同点 1：在控件的界面中，浏览器 都会自动换行。 共同点 2：用户按下 enter 的地方，在提交值中，都会保留手动换行。 区别 在提交值是否保留自动换行： 在提交到服务器的文本中，hard会保留自动换行，转化为 %0D%0A， soft 不会保留 自动换行。
autocomplete 属性	自动完成功能：帮助用户快速填写。	非布尔属性。autocomplete="on | off | 字段名列表/ 空格分割"。
autocapitalize美/ˈɔːtoʊ/ˈkæpɪtəlaɪz/ （全局属性）	是否 自动大写。 注：Safari 浏览器不支持，其他的支持自动大写。 用于：移动端 的虚拟键盘和语音输入等 输入方式， 而不是电脑端的物理键盘，桌面端支持属性，测试也不会自动大写。	全局属性。 ❶ 不自动大写：none； ❷ 自动大写 句子的第一个字母：sentences； ❸ 自动大写 单词的第一个字母：words。 ❹ 自动大写 所有字符：characters。
autofocus （全局属性）	自动获得焦点。 适用可聚焦元素： 输入标签 input、按钮 button、下拉列表 select 、文本域 textarea。	全局属性、布尔属性； 多个时：仅限 一个生效。
dirname 属性	“文本方向”名称 ⇒ 提交 文本方向名称/ 值 对：如 comment.dir=ltr。	属性值：dir= “字段名称.dir” = 如 comment.dir（建议格式） ⇒ 谁的方向 ； 提交名称/值对：dirname = ltr | rtl； 注意：浏览器无法判断时⇒ 显式指定 “浏览器 检测文本方向”：搭配 dir="auto"。
disabled 属性	禁用元素： 不可交互 ⇒ 不能修改、不提交数据；不能点击 、无 click 事件、不聚焦。	布尔属性：属性名=属性值 、仅属性名。
form 属性	绑定“所属表单” ：逻辑关联/不受位置限制。 只要绑定了表单，表单元素放在表单外面，值也会被提交。	绑定表单：form="form.id"。 （ = <form> 元素的 id 属性值）
maxlength、minlength 属性	用户输入值 的 最大字符数、最小字符数。 注：如果未指定 最大字符数 maxlength，就默认用户可以输入无限数量的字符。	属性值：大于等于 0 的整数值； maxlength ≥ value 的字符数≥ minlength ≥ 0； 处理 “空值有效”：minlength 搭配 required 属性。
placeholder 属性	占位符 提示词 ⇒ 提示想要的 数据类型。	placeholder = “需要的数据类型 说明”
readonly 属性	只读信息 ⇒ 展示信息、不可修改、但需要提交的数据 。	布尔属性。
required 属性	不能为空、必须填写。	布尔属性。
spellcheck	拼写检查。	属性值： ❶ 进行拼写检查：true。 ❷ 不进行拼写检查：false。

---

• 例 1： 网站里的 多行文本框。

---

• 例 2： 设置多行文本域的宽高（列数、行数，以字符为单位）。
  • 优先用 CSS 设置宽高，建议使用 CSS 的 高度 height 、 宽度 width 属性设置宽高，实现样式和结构的分离 。
  • 指定确切的宽高 ⇒ 是 保持一致性 的方法，因为 各个浏览器的默认值 可能不同。

			<label for="comment">请输入您的评论：</label>
            <textarea  id="comment" name="" cols="30" rows="10"></textarea>

• 演示
  • 

---

• 例 3： 设置多行文本的 默认值。
  • ★标签内容 = 默认值： 如果想设置 多行文本<textarea>的默认内容，可以在 开始和结束标记之间 输入，即 作为标签的内容。
  • 注意：多行文本框 <textarea> 不支持value属性。
    • 

            <label for="comment">请输入您的评论：</label>
            <textarea  id="comment" name="" cols="30" rows="10" >我是评论区默认的内容...</textarea>

• 演示
  • 

---

• 例 4： 设置默认值 = 带换行、空格的标签内容。
  • 注：标签内的空白字符 会原样保留并显示（如 换行、空格、制表符），也会提交。
  • 
  • 
  • 

	<form action="#">
		<label for="comment">请输入评论：</label>
		<textarea name="comment" id="comment" cols="20" rows="10" >
			我是 默认值，
			第一步，xxx，
			第二步，xxx。
		</textarea>
		<input type="submit" value="发布">
	</form>

---

• 例 5： 多行文本 宽高的 可调整性设置。
  • 多行文本框 <textarea>默认是 可调整大小的。
  • 调整大小手柄： 在右下角的拖动手柄，它可以用来改变页面上元素的宽高。
    • 
  • 设置为 不可调整大小：使用 CSS 的 resize: none;。禁用后，右下角的拖动手柄就会消失。
    • 

---

• 知识拓展：十六进制 、回车、换行
  • 十六进制：在数学中，是一种逢 16 进 1 的进位制。
  • 十六进制表示：
    • 数字、字母： 一般用数字 0-9 和 字母 A-F（或 a -f）表示。
    • A-F(a-f) = 10~15，这些称作十六进制数字。
  • 回车和换行
    • ① 回车（CR、%0D）⇒ 本行 开始处，光标移动到 同一行的开始处 。
      • 回车： Carriage returns 。
    • ② 换行（LF，%0A）⇒ 下一行：光标垂直移动到 下一行。
      • 换行： line-feeds。
    • ③ 使光标移动到 下一行的开始处 ⇒ 回车+ 换行，一起使用。

---

• 例 6：设置 多行文本的最大字符数 maxlength、不能为空required、当值无效 :invalid 和有效时:valid 不同的边框样式。

• html

       <div>
           <label for="story" style="display: block;">请写下您创作的故事:</label>
           <textarea name="story" id="story" cols="30" rows="10" maxlength="15" required="required">我是默认值,请输入您的故事...</textarea>
       </div>


       <input type="submit" value="提交表单" />

• css

    textarea:valid {
        /*设置值有效时 边框的样式 */
        border: 2px solid green;
    }
    textarea:invalid {
        /*设置值无效效时 边框的样式 */
        border: 2px dashed red;
    }

• 值有效时
  • 
• 值无效时
  • 

---

• 例 7： 设置 多行文本框的提交值中 是否保留“自动换行”。
• ❶ 测试 默认值 = 提交值 不保留自动换行 wrap="soft"，不设置此属性时，就是这个默认值。不必特意设置，直接省略即可。
• 
• 

	<form action="#">
		<label for="comment">请输入评论：</label>
		<!--测试 默认值 wrap="soft" 自动换行和提交值-->
		<textarea name="soft-test" id="comment" cols="20" rows="10"></textarea>

		<input type="submit" value="发布">
	</form>

---

• ❷ 测试 提交值 保留自动换行 wrap="hard"。

• 

• 

• 

	<form action="#">
		<label for="comment">请输入评论：</label>
		<!--测试 wrap="hard" 自动换行和提交值-->
		<textarea name="hard-test" id="comment" cols="20" rows="10" wrap="hard"></textarea>

		<input type="submit" value="发布">
	</form>

• ❸ 测试手动换行和提交值。
• 
• 
• 

---

使用 textarea 标签时 常见的易错点

易错点	错误表现或原因	正确做法/建议
不该嵌套 html 内容	在 <textarea> 的开闭标签之间 放入 HTML 内容（如 <br>）。这些内容会被直接 显示为默认值，标签内容而不会被解析为 HTML。	⚠️ 多行文本的 标签内容 = 纯文本、不会解析 html 标签。 仅在开闭标签之间 放置纯文本形式的默认值。 需要默认值换行：❶ 可直接在源码中换行，或 ❷ 使用 回车换行的字符实体 &#13;&#10;。
不该使用 value 属性	试图用 value="默认值" 属性来设置初始内容。 ⚠️<textarea> 没有 value 属性。	标签内容 = 默认值： 初始内容直接放在开闭标签之间：<textarea>这里是默认文本</textarea>。
没设置 name 属性	如果 <textarea> 位于 <form> 内，并且需要提交数据，却未设置 name 属性。	⚠️必须设置name 属性： 始终为表单内的 <textarea> 设置 name 属性，不设置name 就不提交输入值。
尺寸控制不当	仅使用 rows 和 cols 属性控制大小， 但这些单位是字符数，在不同字体和环境下显示不一致。	⚠️优先使用 CSS（width 和 height）来控制尺寸，以实现响应式和精确的布局。 rows 和 cols 可作为 基础回退。
可访问性缺失	没有为 <textarea> 关联描述性的 <label>， 屏幕阅读器用户无法了解其用途。	使用 <label for="textarea_id"> 或 隐式关联， 确保每个输入区域都有清晰、可读的标签。
跨站脚本攻击 XSS （Cross-Site Scripting）	将用户从 <textarea> 输入的内容， 未经任何处理就渲染到网页上。恶意用户可能输入脚本代码。	永远不要信任“用户输入”。 在将内容输出到页面之前，必须进行适当的转义或过滤（具体方法取决于前后端技术栈）。

---

---

2. button： 一个 按钮 （提交数据、重置表单、自定义功能；标签内 可嵌套 html 内容）

<button> 标签：用于创建 可点击的按钮，可以在表单内使用，也可以在表单外部使用，需要按钮的地方，都可以使用它。

• 按钮 <button> 标签的内容：可以包含 html 代码，会全部解析显示。如 文本、图像、其他 HTML 元素，但不允许嵌套 “交互性元素”，因为会互相干扰。两个交互的元素，点击时 都需要触发某个操作时，该触发哪个呢？会互相干扰。

• <button>按钮 标签是一个 交互式元素。

  • 交互式元素：激活后，可执行某个操作。 可由用户 （鼠标、键盘、手指、语音命令或其他辅助技术）激活。一旦激活，它就会 执行一个操作（可编程），比如 提交一个表单或打开一个对话框。

• 按钮 默认外观：不同浏览器、不同平台略有差异。应该使用 CSS 更改按钮的外观，统一样式。

---

• 例： 按钮 显示内容 = 按钮 标签内容 = ✔️ html 代码 ⇒ ✔️ 注：不局限于纯文字、可图像等。标签没有内容，就不显示按钮文字。
  • 
  • 
  • 

	<h1>测试 button 标签</h1>
	<form action="#">
		<!--按钮显示内容 = 按钮标签内容-->
		<button type="button"></button>
		<!--按钮显示内容  = 文字-->
		<button type="button">标签内容</button>
		
		<!--按钮内包含图片-->
		<button type="submit">
			<img src="images/login-button.png" alt="登录按钮">
		</button>
	</form>

---

• 两种按钮的 区别： <button> 、 <input type="button">
  • 关键词：标签内容、样式。
  • ① 标签内容：
    • <input type="button"> ：是空标签，没有标签内容，不能包含 html 内容，只能通过 值value 设置按钮的显示文字。
    • <button> ：有开始/ 结束标签，能放标签内容， 可包含 HTML 内容，可以放 图片img 等，标签内容更多样，样式更多样。
  • ② 设置 复杂样式：⇒ 优先选择 按钮标签 <button>。 <button>元素比<input>元素 更容易设置样式。
    • 使用伪类： 使用伪元素 ::after和::before 能设计更复杂的样式，而 <input> 只接受 value 设置的文字。

---

button 标签的 属性（表格）

• button 标签的属性 浏览器支持： 基本属性 浏览器支持都比较好，新属性 command、commandfor 及其属性值支持度较差（尤其是移动端）。
  • 

属性名	用途	属性值
type 属性	按钮的类型。 ⚠️ 注：应该明确指定 按钮类型 type 值。 原因：不同浏览器 默认按钮类型不同， 为了实现统一性，直接指明是最好选择， 不明确指定按钮类型，会出现各个浏览器行为不一致问题。	属性值： type=submit | reset |button | 。 ❶ 默认值/ 空值/ 无效值 = 提交按钮 = 提交表单数据：submit。 ❷ 重置表单数据 为“初始值”： reset。 ❸ 无默认行为 普通按钮：button。
name 属性	名称。提交值 必需属性： ⇒ ★不设置name 属性，提交表单时，值就不会被提交。 提交表单：name=value 名称/值对。	name = “字符串/ 控件名字”。
value 属性	提交值 = 表单 提交的数据。	value = “字符串”。
autofocus （全局属性）	自动获得焦点。	全局属性、布尔属性； 多个时：仅限 一个生效。
command	指定 被控制元素 要执行的操作。	属性值：command = show-modal、close、request-close、show-popover、hide-popover、toggle-popover、自定义值。 ❶ 以模态（modal）形式显示一个 <dialog> 对话框（如果对话框已经是模态状态，则不会执行任何操作）：show-modal 。 模态对话框：显示时 会阻止用户与页面其他部分交互，通常有背景遮罩层。 ❷ 关闭 对话框<dialog>：close。 ❸ 请求关闭 对话框<dialog>：request-close。 区别：在关闭事件close 之前多了个取消事件cancel，如果想阻止关闭对话框<dialog>，还可以在cancel事件上调用event . preventdefault()来阻止。 ❹ 显示 隐藏的弹窗元素：show-popover。 ❺ 隐藏 显示的弹窗元素：hide-popover。 ❻ 切换 弹窗元素的隐藏/ 显示状态：toggle-popover 。 ❼ 自定义值：前缀为两个连字符（-）的自定义值。 带有自定义值的按钮 将在被控制元素上分派 CommandEvent。
commandfor	按钮⇒ 命令按钮。 将<button>元素转换为命令按钮，通过发出按钮的命令 来控制给定的交互式元素。 具体命令/ 操作：由 command 属性中指定。	属性值：commandfor= 被控元素.id⇒ 指明控制对象。 commandfor属性以要控制的元素的 ID 作为其值。 这是一个更通用的 popovertarget 版本。
disabled 属性	禁用元素： 不可交互 ⇒ 不能修改、不提交数据；不能点击 、无 click 事件、不聚焦。	适用所有 type 类型；
form 属性	绑定“所属表单” ：逻辑关联/不受位置限制。 绑定表单后， 可以将 <button> 元素 放在文档内的任何位置， 而不仅仅是 form 元素的内部。	绑定表单：form="form.id"。 （ = <form> 元素的 id 属性值）
formaction 属性	服务器页面地址 url 。 ⇒ 接收 + 处理表单提交数据 。 仅用于 3 个 提交按钮： <button type="submit"> 、< input type="submit | image">； 可覆盖 form 标签的 action。	属性值：action= "url"； 空值/未设置 action：提交到当前页面 url 。
formenctype 属性	如何编码数据 ⇒ 表单数据的“编码类型 = MIME 类型” 。 用于： 提交按钮。 可覆盖 form 标签的 enctype；	属性值：enctype = “application/x-www-form-urlencoded | multipart/form-data | text/plain”； ❶ 默认值 = url 编码 所有字符⇒ 纯文本：application/x-www-form-urlencoded ； ❷ 不编码 ⇒ 文件上传、多部分表单数据：multipart/form-data； ❸ 简单编码⇒ 纯文本、调试用：text/plain。
formmethod 属性	表单数据的发送位置 = 数据的位置 ⇒ “HTTP 方法”。 用于： 提交按钮。 可覆盖 form 标签的 method 属性。	属性值：method="post | get | dialog"； ❶ HTTP GET 方法 = url 后 发送； 数据 附加在 URL 后 ?key=value ⇒ 用于 小数据、不敏感数据、不修改数据：搜索、过滤； ❷ HTTP POST 方法 = 请求体 发送数据： ⇒ 数据在 HTTP 请求体中 ⇒ 用于 大数据、敏感数据、修改数据：登录、注册、上传文件； ❸ 提交时关闭对话框：dialog。
formnovalidate 属性	不验证表单 ⇒ 禁用 浏览器内置验证、需手动设置验证。 用于： 提交按钮。 可覆盖 form 标签 novalidate 属性。	布尔属性； 未设置时 默认验证表单。
formtarget 属性	响应内容的显示位置： ⇒ 表单提交后 在何处显示响应内容。 用于： 提交按钮。 可覆盖 form 标签 target 属性。	属性值： ❶ 当前位置 = 当前窗口/ 标签页/ 相同框架中：_self； ❷ 新窗口/ 标签页：_blank； ❸ 父框架：_parent； ❹ 顶级窗口/ 整个窗口、清除框架：_top； ❺ 指定名称的框架中：framename。
popovertarget 、popovertargetaction 属性	绑定弹窗元素，并指定 显示/关闭 弹出窗口。 适用范围：按钮类型 ⇒ <input type="button"> 、按钮标签 <button type="button">； 示例：参见 <input>标签的该属性。	popovertarget 属性值 = 弹窗元素的 id； popovertargetaction 属性值： ❶ 可切换 显式或隐藏： toggle。 ❷ 显式：show ； ❸ 隐藏 ：hide。

---

• 例 1： 各大网站对按钮<button> 的使用。

• 

• 

• 

• 

---

• 例 2：一个被禁用的按钮。显示为灰色，无法点击。
  • 禁用的 刷新问题：如果 使用 js 修改禁用状态，在 火狐浏览器 firefox 出现问题 ⇒ 没有刷新对禁用的设置，通过禁用自动完成 autocomplete="off" 修复。
  • 参考 html - Bug With Firefox - Disabled Attribute of Input Not Resetting When Refreshing - Stack Overflow 。

<button type="button" disabled>Click here!</button>

---

• 例 3： 让数据提交到 不同的服务器页面。
  • 两个提交按钮， 使用不同的 服务器页面地址 formaction，就可以提交到 不同的服务器页面。
  • 如果 提交按钮 没有设置 formaction，数据默认提交到 form 标签的 action属性 指定的服务器页面。

<form action="/example/html5/demo_form.asp" method="get">
	<label>First name: <input type="text" name="fname" /></label><br />
	<label>Last name: <input type="text" name="lname" /></label><br />
	<button type="submit">提交</button><br />
	<button type="submit" formaction="/example/html5/demo_admin.asp">以管理员身份提交</button>
</form>

---

---

3. select：下拉列表 （选择一个、多个值）

<select>_{美/sɪˈlekt/，选则} 标签：用于创建下拉 选择列表，允许用户 从多个选项中 选择 一个或多个值。

• 

• 删除 下拉列表的默认外观：使用 CSS 的 去除外观 appearance:none;_{美/əˈpɪrəns,外观}属性 。

---

下拉列表 <select> 基本语法

• 下拉列表的 选项：使用子标签 选项 <option> 。
• 选项 显示文字： 优先显示 短说明option.label ，没有短说明 ⇒ 显示 option 标签内容。
• 选中项 提交名称 = select.name。
• 选中项 提交值 = option.value 或 option的标签内容（无 value 值时）。

<select name="选项名称" id="唯一标识">
  <option value="值1">显示文本1</option>
  <option value="值2">显示文本2</option>
  <option value="值3">显示文本3</option>
</select>

---

select 标签的 属性（表格）

• select 标签的 属性 浏览器支持
• size 属性 浏览器支持度比较差，尤其是移动端，其他的基本属性 支持度都比较好。
  • 

属性名	用途	属性值
name 属性	名称。提交值 必需属性： ⇒ ★不设置name 属性，提交表单时，值就不会被提交。 提交表单：name=value 名称/值对。	name = “字符串/ 控件名字”。
autocomplete 属性	自动完成功能：帮助用户快速填写。	非布尔属性。autocomplete="on | off | 字段名列表/ 空格分割"。
autofocus （全局属性）	自动获得焦点 。 适用可聚焦表单元素： 输入标签 input、按钮 button、下拉列表 select 、文本域 textarea。	全局属性、布尔属性； 多个时：仅限 一个生效。
disabled 属性	禁用元素： 不可交互 ⇒ 不能修改、不提交数据；不能点击 、无 click 事件、不聚焦。	布尔属性：属性名=属性值 、仅属性名。 继承 禁用：如果未指定禁用，也可能从父元素继承（如 fieldset）， 父元素被禁用了⇒ 子元素也会被禁用。
form 属性	绑定“所属表单” ：逻辑关联/ 不受位置限制 ⇒ 元素不在表单内部时使用。 绑定表单后，下拉列表放在表单外部，值也会被提交。	绑定表单：form="form.id"。 （ = <form> 元素的 id 属性值）
multiple 属性	可选择 多个选项。（按住 Ctrl/ Cmd 键） 下拉列表中，默认 只能选择一个。 设置可多选后，浏览器会显示一个可滚动的 列表框，而非一个下拉菜单。	布尔属性。
required 属性	不能为空、必须填写。	布尔属性。
size 属性	下拉列表的 显式高度（= 可见行数 = 可见选项数） 。 使用后，UI 显示 为滚动列表，而非下拉列表。 因为限制了可见高度，无法一次性全部展示，必须有一个滚动条 才能看见其他项。 推荐用 CSS 的 高度 height 设置，更具备一致性。 例： size="3"	size=“数字” ， 以字符数 为单位，字符平均高度。

---

各大网站 对下拉列表<select>的使用

• 
• 

---

• 例 1： 在下拉列表中 创建“选项组” ⇒ 给选项分组。
  • ❶ 给选项 <option> 添加 父级标签：选项分组 <optgroup>标签 。
  • ❷ 设置 每个分组的名称：选项分组标签的属性 optgroup.label。分组名称 = optgroup.label 属性值。

		<h1>测试 select 标签</h1>
		<form action="#">
			<label for="options">请选择一个选项：</label>
			
			<select name="select-test" id="options">
				<!--optgroup>option[value=value$]{选项$}*5-->
				<optgroup label="第一组">
					<option value="value1">选项1</option>
					<!--测试无 value 的提交值 = 标签内容-->
					<!--<option>选项1</option>-->
					<option value="value2">选项2</option>
					<option value="value3">选项3</option>
				</optgroup>
				<optgroup label="第二组">
					<option value="value4">选项4</option>
					<option value="value5">选项5</option>
				</optgroup>
			</select>
			<button type="submit">提交信息</button>
		
		</form>

• 演示： 加粗的组名 、缩进的选项。
  • 
  • 

---

• <select>下拉列表 提交的值

  • ❶ 提交值 = option.value 属性值。（有 value 属性时 ）

    • 

  • ❷ 提交值 = <option>的 标签内容。（无 value 属性时）

    • 

---

• 例 2： 设置下拉列表的 预选值/ 默认值 = option.selected 属性。
  • ✔️ 下拉列表 <select> 默认选中项 = 第一项，也默认 只显示一项，可通过 option.selected 属性更改 默认选中项，点击后查看更多选项。
  • 如 把第三项设为默认选中项 ⇒ <option value="value3" selected>选项3</option>
  • 

---

• 知识拓展：默认选中项的 属性设置
  • ❶ 单选按钮、复选框 默认选中项： checked 属性。
  • ❷ 下拉列表 默认选中项：option.seleced 属性。⇒ 对应下拉列表 <select> 标签名。
    • 在 select标签 中使用 checked 属性，会出现错误提示。
      • 

---

• 例 3：一个带分组的 下拉列表，能多选，且设置了显示行数。
  • 设置 可选择多个选项： 使用 下拉列表的 多选 select.multiple_{美/ˈmʌltɪpl/} 属性。 ⇒ 选择多个值时，服务器接收的是 数组形式的数据。
  • 设置 显示行数 ：使用下拉列表的 可见行数 select.size 属性。

        <label>请选择一个或多个宠物:
            <select name="pets" multiple="multiple" size="4">
                <optgroup label="四腿类的宠物">
                    <option value="dog">狗狗</option>
                    <option value="cat">猫咪</option>
                    <option value="hamster" disabled>仓鼠</option>
                </optgroup>
                <optgroup label="飞行类的宠物">
                    <option value="parrot">鹦鹉</option>
                    <option value="macaw">金刚鹦鹉</option>
                    <option value="albatross">信天翁</option>
                </optgroup>
            </select>
        </label>

• 演示

  • 用户 多选操作：用户用鼠标时，可以按住 Ctrl、Command 或 Shift键(取决于 操作系统)，然后单击 多个选项来 选择或取消选择。

    • windows 系统，按 ctrl，再用鼠标单击。
    • 

  • 设置 可见行数：使用 下拉列表可见行数 size 属性 （= 高度，以）可以滚动查看 所有选项。

    • 如下图 ↓，前面的是 默认的展开样式，后面的是 设置了可见行数为 4 后的样式，出现了滚动条，滚动列表。
      • 

  • 禁用 单个选项：使用 禁用 option.disabled 属性

    • <option value="hamster" disabled="disabled">仓鼠</option>
    • “仓鼠”选项 被禁用（disabled 属性），因此 无法被选中，默认显示为灰色字体。
      • 

---

---

• 例 4： 页面加载时，自动获得焦点的 下拉列表：autofocus，布尔属性（Boolean attribute）。

<select autofocus="autofocus">
   <option value="volvo">Volvo</option>
   <option value="saab">Saab</option>
   <option value="opel">Opel</option>
   <option value="audi">Audi</option>
</select> 

• 获得输入焦点，下拉列表的边框 一般会有变化。如下 ↓
  • 
  • 

---

• 例 5： 一个被禁用的下拉列表： <select disabled>
  • 禁用 下拉列表：使用 disabled 属性。
    

---

• 例 6： 一个 位于表单之外的 下拉列表，但绑定了所属表单，仍然属于该表单。
  • 把 下拉列表 绑定到所属表单 <form> 上：使用下拉列表的 select.form 属性 。
  • form的属性值 = 同一文档中的某个 <form>表单 元素的 id 属性值。
    • 绑定方式：select.form="form.id" （属性值相同）。

		<h1>测试 select 标签</h1>
		<form action="#" id="car-form">
			<input type="submit">
		</form>
		<br>
		<label for="car-list">请选择品牌名：</label>
		<select name="car-list" id="car-list" form="car-form">
			<option value="volvo">Volvo</option>
			<option value="saab">Saab</option>
			<option value="opel">Opel</option>
			<option value="audi">Audi</option>
		</select>

• 演示
  • 提交值的 值对：下拉列表name = 选项option的value ⇒ select.name="option.value"
  • 
  • 

---

4. optgroup： 下拉列表的 选项分组 （必须父元素：select；必需属性：label = “分组名称”）

<optgroup> 标签：用于在 <select> 下拉列表中 分组选项，使选项分类更清晰，提升用户体验。

• 使用选择：需要给下拉列表的选项 进行分组时 ⇒ 使用 选项分组 optgroup 标签。

• 

---

optgroup 标签的 属性（表格）

• 浏览器支持度很好，仅 disabled 属性 不被 手机端 Safari 支持（2025-12）。

属性名	用途	属性值
⚠️ label（必需）	分组名称。	label="分组的名称"。 未设置 optgroup.label = 无分组名 ⇒ 显示成 空白。
disabled 属性	禁用元素： 不可交互 ⇒ 不能修改、不提交数据；不能点击 、无 click 事件、不聚焦。	布尔属性：属性名=属性值 、仅属性名。 例： 禁用第二个分组。

---

• 例： 把下拉列表的选项 分成两个分组。
  • 设置 分组名称 ：使用 optgroup.label。

<select>
  <optgroup label="Swedish Cars">
    <option value ="volvo">Volvo</option>
    <option value ="saab">Saab</option>
  </optgroup>

  <optgroup label="German Cars">
    <option value ="mercedes">Mercedes</option>
    <option value ="audi">Audi</option>
  </optgroup>
</select>

• 默认显示项： 第一个分组的 第一个选项，点击下拉键后 展示所有的分组。
• 分组名 不可选中：只能选中 选项option，因为提交的值 = option.value。
• 把第二分组禁用：显示灰色，点击无反应、不可选中。
  • <optgroup label="German Cars" disabled>
    

---

---

5. option ：下拉列表、建议值列表 选项 （用于：select / optgroup、datalist 内部；选项显示 优先级： label ＞ 标签内容 ；提交值 优先级：value ＞ 标签内容）

<option> 标签：用于在 HTML 表单中定义下拉列表（<select>、下拉选择分组 <optgroup>）、 建议值 数据列表（<datalist>）中的选项。

• 下拉列表（含 下拉选项分组）、数据列表：设置 下拉列表 <select>（含 下拉选项分组 <optgroup>）、<datalist>元素中的选项。

  • ⇒ ⚠️ 选项 <option> 的父标签：必须是 select、optgroup、datalist 之一 。（其中 optgroup 的父标签：必须是 下拉列表 select ）

  • ① 下拉列表 <select>的 选项： select > option

    • 

  • ② 下拉列表 选项分组 <optgroup> 里的 选项： select > optgroup > option。

    • 注：下拉选项分组 optgroup 只能在 select标签中使用，不能在建议值列表 datalist标签中使用。
    • 

  • ③ 建议值 数据列表 <datalist>的 选项。

    • 显示 数据列表中的选项：本身不直接显示，需要绑定 <input> 标签，输入时，就会显示建议值（仅建议、非强制选择）。

    • 绑定方法：input.list = datalist.id。(属性值相同）

    • 

    • optgroup 的父元素限制：不可以在 datalist标签中 使用，仅用于 下拉列表 select标签。

    • 

---

• 上方示例图的代码 如下 ↓

            <label for="options">请选择一个选项：</label>
            <select name="options" id="options">
                <!--option[value=选项$]{选项$}*5-->
                <optgroup label="第一组选项">
                    <option value="选项1">选项1</option>
                    <option value="选项2">选项2</option>
                    <option value="选项3">选项3</option>
                </optgroup>

                <optgroup label="第二组选项">
                    <option value="选项4">选项4</option>
                    <option value="选项5">选项5</option>
                </optgroup>
            </select>
            
            <label for="pets-choice">请选择一个喜欢的宠物：</label>
            <input type="text" id="pets-choice" list="all-pets">
            <datalist id="all-pets">
                    <option value="dog">狗狗</option>
                    <option value="cat">猫咪</option>
                    <option value="hamster">仓鼠</option>

                    <option value="parrot">鹦鹉</option>
                    <option value="macaw">金刚鹦鹉</option>
                    <option value="albatross">信天翁</option>
            </datalist>

---

option 标签的 属性（表格）

• 各个属性 浏览器支持度都很好。

属性名	用途	属性值
value 属性	提交值 （= 表单 提交的数据）。 如果 省略 value 属性：提交值 = 标签内容。 ⇒ 从 option元素的 “标签内容”中获取提交值。 ✔️ 总结：提交值 = 有 value 用 value，没value 用 标签内容。	value = “字符串”。
disabled 属性	禁用元素： 不可交互 ⇒ 不能修改、不提交数据；不能点击 、无 click 事件、不聚焦。	布尔属性：属性名=属性值 、仅属性名。
label	选项的短说明，替代标签内容显示。 如果 没设置 短说明 label属性： ⇒ label值 = <option>标签内容 = 选项显示内容。 优先级：优先显示 短说明 label ，没有短说明 显示标签内容。 ⇒ 短说明 label ＞ 标签内容。 ✔️ 总结： 选项显示文本 = 有label 用label，没label 用标签内容。 无障碍访问：屏幕阅读器通常会读取 label 属性， 确保 label 能准确代表选项含义。	label="选项短说明"。
selected	下拉列表 默认选中项。 仅用于： 下拉列表select 的选项中。	布尔属性。仅属性名 即可，无需属性值。 （html5 中的简写方式）

---

• 例 1： 禁用 下拉列表中的一个选项。

<select>
  <option>Volvo</option>
  <option>Saab</option>
  <option disabled="disabled">Mercedes</option>
  <option>Audi</option>
</select>

---

• 🔔 例 2： 选项的显示内容：短说明 label 属性值 或 <option> 标签内容。
  • ❶ 选项优先显示 短说明 label 属性值。
  • ❷ 未设置 label 、值为空 label="" ⇒ 显示 option 标签内容。
• 
• 
• 
• 

<select>
  <option label="Volvo">Volvo (Latin for "I roll")</option>
	<!--测试无 label 属性-->
	<!--<option>Volvo (Latin for "I roll")</option>-->
	
	<!--测试 label 为空值-->
	<!--<option label="">Volvo (Latin for "I roll")</option>-->
	
  <option label="Saab">Saab (Swedish Aeroplane AB)</option>
  <option label="Mercedes">Mercedes (Mercedes-Benz)</option>
  <option label="Audi">Audi (Auto Union Deutschland Ingolstadt)</option>
</select>

---

• 例 3：建议值 数据列表中，也是label 优先原则。但 谷歌会把 value 值 也一起显示出来，而 火狐 有label 后，就不会显示value 值。
• 
• 

		<label for="pets-choice">请选择一个喜欢的宠物：</label>
		<input type="text" id="pets-choice" list="all-pets">
		<datalist id="all-pets">
			<option value="dog">狗狗</option>
			<!--测试 label 属性、标签内容的优先性-->
			<option value="dog" label="狗狗 label">狗狗</option>
			<option value="cat">猫咪</option>
			<option value="cat" label="猫咪 label">猫咪</option>
			<option value="hamster">仓鼠</option>
			<!--测试 label 为空值-->
			<option value="hamster" label="">label="" 的标签内容</option>
			<option value="parrot">鹦鹉</option>
			<option value="macaw">金刚鹦鹉</option>
			<option value="albatross">信天翁</option>
		</datalist>

---

---

6. fieldset： 表单元素 分组 ⇒ 同类信息 一个组（用于：表单元素；表单分组标题：legend 标签 / 第一个子元素）

• fieldset 标签：是 HTML 表单中用于 给 表单元素 分组（同类信息） 的 容器标签，常与 <legend> 标签配合使用。

• ✔️ 分组方式：同类信息 = 一个分组 ⇒ 逻辑分组。

  • 将复杂的表单划分为 逻辑区块。 给 逻辑上 是一个类别的表单元素 分组。如 单选按钮分组、相关复选框分组、同一类信息的几个表单元素。

• ❌ 不应该用于 ：❶ 非表单元素（ 如 div、span），❷ 单个表单元素、简单表单 也不需要分组（ 很简单，没有分组的必要），❸ 不要用于布局 ，用 div 或 section 等进行布局。

• 表单分组 显示外观：默认周围显示边框 （= 凹槽边框 2px groove），将分组内容围在一起，有内边距，默认 min-inline-size: min-content。可使用 CSS 自定义外观，设置统一样式。

  • 

• 表单元素 分组：⇒ 表单分组 <fieldset> 标签。

• 表单分组 标题：使用 表单分组标题 <legend>_{/ˈledʒənd/} 标签。

• 上方示例图 代码如下 ↓

       <fieldset>
       	<!--禁用表单分组-->
		<!--<fieldset disabled>-->
           <legend>请选择您最喜欢的宠物：</legend>
           <!--(label[for]+input[type=radio id])*5-->
			<label for="cat">猫咪</label>
			<input id="cat" type="radio" name="pets" value="cat"/>
			<br />
			<label for="dog">狗狗</label>
			<input id="dog" type="radio" name="pets" value="dog"/>
			<br />
			<label for="hamster">仓鼠</label>
			<input id="hamster" type="radio" name="pets" value="hamster"/>
			<br />
			<label for="parrot">鹦鹉</label>
			<input id="parrot" type="radio" name="pets" value="parrot" />
       </fieldset>

• 禁用 表单分组：子元素也会被自动禁用。
  • 

---

fieldset 标签的 属性（表格）

• 3 个属性 浏览器支持度都很好。

属性名	用途	属性值
name 属性	fieldset的名称字段。 注：表单提交时 不包含其值，也没有value 属性。	name = “字符串/ 控件名字”。
disabled 属性	禁用元素： 不可交互 ⇒ 不能修改、不提交数据；不能点击 、无 click 事件、不聚焦。 继承禁用：表单分组fieldset被禁用，分组内部的元素也会 全部被禁用。	布尔属性：属性名=属性值 、仅属性名。
form 属性	绑定“所属表单” ：逻辑关联、不受位置限制。 绑定表单后，表单元素可以放在表单的外部。	绑定表单：form="form.id"。 （ = <form> 元素的 id 属性值）

---

• 例 1： 表单分组的嵌套 ⇒ 表单分组中 还有表单分组。
• 

<fieldset>
  <legend>订单信息</legend>
  
  <fieldset>
    <legend>收货地址</legend>
    <!-- 地址相关字段 -->
  </fieldset>
  
  <fieldset>
    <legend>支付方式</legend>
    <!-- 支付相关字段 -->
  </fieldset>
</fieldset>

---

• 例 2：给表单分组 绑定所属表单。

		<form action="#" id="pet-form">
			<button type="submit">提交信息</button>
		</form>
		<fieldset form="pet-form" name="pets">
			<!--禁用表单分组-->
		<!--<fieldset disabled>-->
			<legend>请选择您最喜欢的宠物：</legend>
			<!--(label[for]+input[type=radio id])*5-->
			<label for="cat">猫咪</label>
			<input id="cat" type="radio" name="pets" value="cat" form="pet-form" />
			<br />
			<label for="dog">狗狗</label>
			<input id="dog" type="radio" name="pets" value="dog"/>
			<br />
			<label for="hamster">仓鼠</label>
			<input id="hamster" type="radio" name="pets" value="hamster"/>
			<br />
			<label for="parrot">鹦鹉</label>
			<input id="parrot" type="radio" name="pets" value="parrot" />
		</fieldset>

• 演示
• ⚠️ 表单分组fieldset 绑定所属表单 ，但分组内的子元素 不会一起绑定到表单，需要分别设置 form 属性，绑定所属表单，否则不会提交值。

---

• 例 3：一个简单的“学生档案信息”表单。

    <form action="">
        <fieldset>
            <legend>学生档案</legend>
            <label for="stuname">姓&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;名:</label>
            <input type="text" id="stuname" />
            <br />
            <br />

            <label for="tel">手&nbsp; 机 &nbsp;号:</label>
            <input type="tel" id="tel" />
            <br />
            <br />

            <label for="email">邮 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 箱:</label>
            <input type="email" id="email" />
            <br />
            <br />

            <label for="collegename">所属学院:</label>
            <input type="text" id="collegename" list="college" />

            <datalist id="college">
                <option value="金融学院">金融学院</option>
                <option value="计算机学院">计算机学院</option>
                <option value="体育学院">体育学院</option>
                <option value="设计学院">设计学院</option>
            </datalist>
            <br />
            <br />

            <label for="birthdata">出生日期:</label>
            <input type="date" id="birthdata" />
            <br />
            <br />

            <label for="grade">成 &nbsp;&nbsp;&nbsp;&nbsp; &nbsp;绩:</label>
            <input type="number" id="grade" />
            <br />
            <br />

            <input type="submit" value="提交表格" />
            <input type="reset" value="清空填写数据" />

        </fieldset>
    </form>

---

---

7. legend：表单分组 标题（允许父元素：fieldset 、第一个子元素）

• legend 标签：为表单分组定义标题（<fieldset>）。 提升表单的可读性、可访问性，为相关分组 提供一个说明性的 标题。
• <legend> 标签 = 表单中 某个区域的“小标题”。它的核心价值：在于提供语义化的结构，使代码、视觉呈现和辅助技术都能明确理解表单的组织方式。
  • 屏幕阅读器：会朗读 <legend> 文本，来描述 后续控件的分组目的。
• ⚠️ <legend> 位置： 必须嵌套在 <fieldset> 标签内的第一个子元素位置（放其他位置 也可能被浏览器识别，但容易出错，请勿使用）。
  <legend> 属性：可使用全局属性，本身无属性。

---

• 例： 表单分组，设置表单分组标题。
• 

<form>
  <fieldset>
    <legend>联系方式</legend>
    <label>电子邮件： <input type="email" name="email"></label><br>
    <label>电　　话： <input type="tel" name="phone"></label>
  </fieldset>

  <fieldset>
    <legend>配送地址</legend>
    <label>地　　址： <input type="text" name="address"></label><br>
    <label>城　　市： <input type="text" name="city"></label>
  </fieldset>
</form>

---

---

8. output： 存放 输出结果 = 计算结果、用户操作结果 （默认：仅显示、不提交计算结果；提交值：可用隐藏值同步）

<output> 标签：是 HTML5 新增的元素，用于表示 计算结果、用户操作的结果。

• 实时更新 输出结果：搭配 值改变时触发 = oninput 事件，更新 output.textContent。
• 默认不提交值 仅显示：如果计算结果需要随表单提交，应该使用隐藏的 <input> 字段来存储这个值⇒ 用隐藏字段同步值（使用 js 赋值给隐藏字段 = 隐藏字段的值 会被提交），而 <output> 仅用于显示，默认不会提交计算结果。
• 语义明确⇒ 可访问性：直接告知浏览器、辅助工具（如 屏幕阅读器）该元素的内容是“输出结果”，增强了可访问性。
• ✔️ 何时使用：在表单中需要 实时展示 计算结果、用户操作的反馈时，应该优先考虑使用<output>，这是符合语义化的最佳实践。
• ❌ 不能用于 通用容器： 不能当作普通的 <div> 或 <span>，严格用于“输出”。只用于显示由脚本计算或 用户交互（如 表单输入）动态生成的结果。

---

output 标签的属性 （表格）

• output 标签的 属性浏览器兼容
  • 浏览器支持度都很好。（仅 IE 浏览器不支持，但没有关系，因为 IE 已经被淘汰了）

属性名	用途	属性值
name 属性	名称。 ⇒ ⚠️ 输出结果 仅显示、不提交： ⇒ 即使设置name 属性，提交表单时，值也不会被提交。	name = “字符串/ 控件名字”。
for 属性	关联 参与计算的元素。 明确 数据来源：说明参与计算的元素 有哪些。	属性值：for = "参与计算的元素.id" 。 多个id ：空格分隔（多个参与计算的元素 id）。
form 属性	绑定“所属表单” ：逻辑关联、不受位置限制。 只要绑定了表单，表单元素放在表单外面，值也会被提交。	绑定表单：form="form.id"。 （ = <form> 元素的 id 属性值）

---

• 例： 设置一个加法计算，并显示计算结果。
  • 输出结果 <output>默认样式：无任何特殊样式，显示为普通的文本，可通过 CSS 自定义样式。
  • 计算结果：output 的标签内容 textContent = 参与计算的元素的值 相加 。
  • 字符串 转换成整数⇒ 然后运算：值value = 字符串，不能直接进行运算，要先转换为整数值，⇒ 使用 parseInt() 方法。
  • 实时更新： 在父元素form 上，添加 值输入中/ 改变时 触发的oninput 的事件，监控内部子元素的值的状态，实时更新。
  • 默认不提交值 仅显示：如果计算结果需要随表单提交，应该使用隐藏的 <input> 字段来存储这个值，用隐藏字段同步值（使用 js 赋值给隐藏字段），而 <output> 仅用于显示，默认不会提交计算结果。
• 

	<form action="#" oninput="result.textContent=parseInt(a.value)+parseInt(b.value)">

		<label for="a">值 A：</label>
		0<input type="range" name="a" id="a" min="0" max="100">100
		+
		<label for="b">值 B：</label>
		<input type="number" name="b" id="b" value="10" placeholder="请输入数字">
		=
		<label for="result">结果：</label>
		<output name="result" id="result" for="a b"></output>
		
		<!--测试 没有 for 属性，即 没有指明参与计算的元素，值仍然正常计算，但指明后更清楚是谁参与了计算-->
		<!--<output name="result" id="result"></output>-->
		<br />
		<button type="submit">提交结果</button>			
	</form>

---

9. progress：显示任务进度 （水平进度条；非表单元素、不可绑定表单；仅显示进度、不提交值）

<progress> 标签：用于在网页中 显示 任务进度 ⇒ 完成情况的 进度条。

• 注：规范文档中，<progress> 标签 归类在表单章节中，但现在被明确定义为非表单控件，它仅用于展示任务的进度，不再能通过 form 属性与特定的表单关联。

• 仅用于 显示任务进度、不提交值：任务进度 progress 不会提交值，也没有name 属性。

• 默认显示：一个进度条（未设置属性时，默认左右滑动 ⇒ 任务进行中，无预期时间）。

  • 

• 无障碍访问⇒ 关联 label 标签：HTML 标准允许 label 标签与 progress 搭配，主要是为了实现无障碍访问（Accessibility）。也可以 使用 ARIA 类属性，如 aria-labelledby 或 aria-label 提供可访问性。

• 隐式 ARIA 角色 ： role="progressbar" （角色 = 进度条）。

• 不确定状态的 进度条：只需删除 value 属性，浏览器会自动渲染为不确定进度样式（通常为 循环动画）。

  • 不确定伪类 :indeterminate_{美/ˌɪndɪˈtɜːrmɪnət/} 可用于匹配“不确定的进度条”。
  • 如果进度条已经有当前值value了，必须使用 element.removeAttribute("value") 删除 当前value属性，才能把它变成不确定状态。

• 标签内容 = 回退文本：放置在元素标签之间的文本 是不可访问的 说明文字，仅建议作为不支持progress元素的 旧浏览器的回退，现代浏览器几乎用不到，因为浏览器支持度很好。

• ✔️ 使用选择：对无障碍访问有要求、样式简单的进度指示器，可以考虑使用 progress。

  • 进度条 样式复杂时：搭配第三方框架，自定义进度条。搭配 div 自定义 进度条，团队使用 React、Vue 等框架，其 UI 库已提供功能强大、设计精美的进度条组件。

---

progress 标签的 属性（表格）

• 属性的浏览器兼容性 都很好。

属性名	属性值	用于
value	当前 进度值。 = 当前 已完成的任务数目。	属性值：当前值 value=“有效浮点数”。 ❶ 当前值 value 取值范围：0 - max（ max ≥value ≥ 0） 。 ⇒ 0 和 max 之间 的有效浮点数。 ❷ 如果 省略max：0 - 1 （ 1 ≥value ≥ 0 ）. ⇒ 必须是 0 和 1 之间 的有效浮点数，因为默认值 max="1"。 未设置 max 时，任何大于1的 value 都会显示为 “已完成”(100%)。 ❸ 如果没有 value 属性：则进度条不确定（内部滑条 左右移动）， 这表明 一个活动 正在进行中，没有显示 预期需要多长时间。
max	任务 总进度（总数目）。 任务 需要完成的总数目。	属性值：任务总数 max = “有效浮点数”。 取值范围： max属性的值 必须大于0，并且是一个 有效的浮点数。 总数目max默认值：1 （max="1"）。 max 设为 0 或负数：会导致行为异常，因为 进度值 = value/ max。 分母不能为 0 ，总数目也不能是个负值。

• 任务进度 无最小值：最小值总是 0，且任务进度 <progress> 没有 min 属性。因为显示任务的进度，没有必要设置一个最小值，因为进度肯定都是从 0 开始的，不必多此一举。

---

例：显示下载进度、任务完成度。

• 实时更新 进度条：搭配 javascript 代码，更新 当前值 value。
  • 

		<!--测试 progress 标签-->
		<div class="progress-container">
			<p>下载进度 20/100</p>
			
			<!--使用 label 标签 关联进度条，提供可访问性-->
			<!--<label>下载进度 20/100</label>-->
			<progress value="20" max="100">50%</progress>
		</div>
		<div class="progress-container">
			<p>任务完成度 60%</p>
			<!--不设置 max 值，即 默认 max="1",value 取值范围 0-1-->
			<progress value="0.6">60%</progress>
		</div>

---

10. meter：简单的计量器 ⇒ 静态的测量结果 = 已知范围的当前值（必需属性：当前值 value；默认显示：类似进度条 比例图形；非表单元素、不绑定表单；仅展示、不提交值；）

<meter>标签 ：表示在 已知范围内 的测量值，如 磁盘使用量、容量、投票结果比例、测验分数等。

• 仅展示，不提交值：meter 也没有 name 属性。
• 非表单元素 不绑定表单：meter 的form 属性已废弃，不在规范标准之中，请勿使用。
• 使用选择：
  • ✔️ 展示一个样式简单的计量器（静态的、已知最大值、最小值的 静态测量值或分数，），可以使用 meter 标签。
  • ❌ 样式定制复杂：<meter>的默认样式 在不同浏览器中存在差异，通过 CSS 进行深度自定义较为繁琐，兼容性处理麻烦。这导致许多追求精细视觉控制的设计师或开发者，宁愿使用<div>配合CSS和JavaScript来模拟相同的效果。

使用 meter 标签的优势

1. 需要语义化、可访问性：对于屏幕阅读器等辅助技术，<meter>能明确传达数据的“度量”含义，比普通的<div>更友好。
2. 快速实现原型 或内部工具：当需要一个简单的计量器，且对样式要求不高时，使用<meter>可以省去编写自定义样式和逻辑的功夫。

局限：自定义颜色、形状等样式，需要特定的 CSS 伪元素（如 ::-webkit-meter-bar等），这在跨浏览器时 会非常复杂且兼容性差。

• 显示界面：不同浏览器有所差异。
• 
• 

---

⚠️ 重要注意事项：不要与 任务进度条 <progress> 混淆

• <meter>：表示一个静态的量，在一个固定范围内的当前值。比如，油箱里还有多少油。
  • “已完成的 测量结果” ⇒ 静态计量器 meter 标签。
• <progress>：表示一个正在进行的任务的 完成度，其最大值（max）代表任务总量。比如，文件下载了多少。
  • “正在进行的 任务进度”⇒ 任务进度 progress 标签。

---

meter 标签的 属性（表格）

属性名	用途	属性值
⚠️ value（必需）。	当前值。 测量范围的 当前的值。	属性值：value=“有效浮点数” 。 ❶ 当前值value的取值范围： ✔️ min -max （min ≤ value ≤ max）。 value 属性必须介于 min 与 max 属性值之间。 ❷ 如果没有设置 最大值、最小值：value 取值 ✔️ 0 - 1 （0 ≤ value ≤1） （因为 ：0、1 是最小值、最大值的默认值）。
max 属性	最大值。	属性值：value=“有效浮点数” 。 最大值 取值范围：大于最小值（min ≤ max）。 未设置⇒ 最大值 默认值是 max="1"。
min 属性	最小值。	属性值：value=“有效浮点数” 。 最小值 取值范围：小于最大值（min ≤max）。 未设置 ⇒ 最小值 默认值是 min="0"。
high 属性	“高”范围的 下限值 = 高范围值区间的 下边界。	属性值：value=“有效浮点数” 。 高范围下限 取值范围： low-max （min ≤ low ≤ high ≤ max） ⇒ high 属性必须小于 max 属性值，且必须大于 low 和 min 属性值。 未设置/ 无效值 = 默认值 = 最大值（max）。
low 属性	“低”范围的 上限值 = 低范围值区间的 上边界。	属性值：value=“有效浮点数” 。 低范围上限 取值范围： min-high （min ≤ low ≤ high ≤ max） ⇒ low 属性必须大于 min 属性值，且必须小于 high 和 max 属性值。 未设置/ 无效值 = 默认值 = 最小值（min）。
optimum美/ˈɑːptɪməm/ 属性	最优值 = 最佳值。 显示：浏览器可能会用不同颜色 表示接近或远离最优值。	属性值：value=“有效浮点数” 。 最优值 取值范围： min-max。（min ≤ optimum ≤ max）。 搭配 low、high时：看 optimum在哪个范围区间，决定了哪个区间值 是首选。 越接近最优值 越好： 如果 最优值optimum 值 高于high值，则表示值越高越好。 如果 最优值低于“low”值，说明低值更好。 如果 最优值处于中间，则表示高值和低值都不好，中间区间的值最好。

---

例：测试最大值、最小值、最佳值、高范围下限、低范围上限 、当前值和 显示的颜色。

• 把标签 label 与meter相关联，提供可访问性。label.for=meter.id。

<label for="fuel">燃油油位:</label>

<meter id="fuel" name="fuel"
       min="0" max="100"
       low="30" high="60" optimum="80"
       value="50">
在 50/100
</meter>

• 当 optimum>high 时，颜色 和 属性值之间的关系

  • ⇒ 最佳值 optimum="80" 在高区间 ⇒ 值越高越好。

  • ❶ value = 20 < low，显示红色。

  • 

  • ❷ value = 50 < high，显示黄色。

  • 

  • ❸ value = 70 ≥ high，显示绿色。

  • 

---

---

11. selectedcontent：下拉列表 当前选择项的内容 （实验标签：浏览器支持度比较差）

<selectedcontent> ：HTML用于 <select> 元素内部，显示其当前选择的 <option> 的内容，包含在第一个子元素 <button> 中。可以为 <select> 元素的所有部分进行样式设置，称为“可自定义选择”（customizable selects）。

• 搭配属性：全局属性。
• 位置关系：
  • <button>元素的唯一子元素 = <selectedcontent> 元素
  • <select> 元素的第一个子元素 = <button> 元素
  • 任何 <option> 元素，即 <select> 唯一有效的另一个子元素 = <button> 元素 相邻的兄弟元素。

<select>
  <button>
    <selectedcontent></selectedcontent>
  </button>
  <option></option>
  ...
</select>

• 该 <selectedcontent> 元素 包含当前选择 <option> 内容的克隆。浏览器用 cloneNode() 渲染。
• 当所选 <option> 内容发生变化时，例如事件发生时 change ，<selectedcontent> 的 内容 会被新选中的 <option> 克隆 替换。

---

---

♣ 结束语 和 友情链接

• 快速搜索：涉及知识点比较多，看过之后忘了很正常，想查询时，请按 Ctrl+F 快速搜索关键字哦 (*￣︶￣)。

  • 搜索后，多次按下 enter 键 或 点击搜索框后的 上下箭头，就能在关键词之间快速跳转。

• 参考文档

  • HTML 规范文档：HTML Standard

    • 更全面；
    • 如果学到某个知识点 觉得困惑和冲突，可以直接看 规范文档，这是最标准；进入后 Ctrl + F ，直接搜关键词 快速定位要看的知识点；

  • HTML 规范文档（开发者版本）：HTML Standard, Edition for Web Developers ；

    • 去掉了 用户代理部分的详解，更简洁；

  • WHATWG 标准文档： Standards — WHATWG ；

  • CSS 规范文档：Cascading Style Sheets ；

---

• 友情链接
  • MDN Web Docs
    • 在搜索框输入查询，可以看详细知识点，也可以文章的最下方看到浏览器支持，点击浏览器版本，还能看到具体支持情况；
  • Can I use… Support tables for HTML5, CSS3, etc
    • 在搜索框输入查询，可以查询特性的浏览器支持，点击浏览器版本，还能看到具体支持情况；

---

• 感谢：♥♥♥ 如果这篇文章 对您有帮助的话，可以点赞、评论、关注，鼓励下作者哦，谢谢小可爱们 ~╮(￣▽￣)╭ ~
• 欢迎指正： 如果发现 有需要更正的细节问题，欢迎指正。
• 喜欢请收藏：喜欢本文 可收藏哦，方便快捷，会持续进行 ❶ 知识点更新 及 ❷ 修正错误。

---

• 转载 请评论告知作者 并注明出处 ,Thanks♪(･ω･)ﾉ
  • 作者：Hey_Coder
  • 来源：CSDN
  • 版权声明：本文为博主原创文章，转载请附上博文链接！