optgroup标签用于对select下拉列表中的选项进行分组，提升可读性和用户体验；必须嵌套在select内，通过label定义组名，支持disabled属性禁用整组，可结合CSS优化样式，常用于地区、分类等场景。
在HTML表单中，optgroup 标签用于对下拉列表（select）中的选项进行逻辑分组，使界面更清晰、更易用。它不能单独使用，必须嵌套在 select 标签内，并包含一个必需的 label 属性来定义组名。
optgroup 将多个 option 组织在一起，用户无法选择组名本身，只能选择组内的具体选项。
<select name="city">
<optgroup label="华东地区">
<option value="shanghai">上海</option>
<option value="hangzhou">杭州</option>
<option value="nanjing">南京</option>
</optgroup>
<optgroup label="华北地区">
<option value="beijing">北京</option>
<option value="tianjin">天津</option>
</optgroup>
</select>
label：定义选项组的名称，必填项，显示在下拉菜单中但不可选。
disabled：可选属性，设置后整个组的选项都不可选。
立即学习“前端免费学习笔记（深入）”；
<optgroup label="西部地区" disabled> <option value="chengdu">成都</option> <option value="xian">西安</option> </optgroup>
适用于某些条件未满足时禁用整组选项，比如权限限制或表单状态控制。
<style>
optgroup {
background-color: #f0f8ff;
color: #003366;
font-weight: bold;
}
option {
padding: 2px 10px;
}
</style>
注意：不同浏览器对 optgroup 的样式支持略有差异，建议测试主流设备表现。
合理使用 optgroup 能显著提升用户体验，尤其在选项较多时避免混乱。
基本上就这些。optgroup 是一个小而实用的标签，只要结构正确、分组合理，就能让 select 更专业、更友好。
以上就是HTML表单optgroup标签怎么用_HTMLoptgroup选项分组标签的使用技巧的详细内容，更多请关注php中文网其它相关文章！
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
834
收藏
