分组必须用语义标签：select 内唯一合法分组是 optgroup，需直接嵌套、带 label 属性、仅含 option；多选/单选必须用 fieldset 包裹，配 legend 且 name 带方括号，否则无障碍失效、后端收不到数组。

分组不是加个 class 或 div 就完事，得用语义正确的标签，否则表单逻辑错乱、无障碍失效、后端收不到数组——optgroup 和 fieldset 是唯二合规方案，选错就埋坑。

select 下拉菜单必须用 optgroup 分组

optgroup 是 select 内部唯一合法分组方式，浏览器和读屏软件都依赖它识别结构。写错位置或漏属性会直接失效。

• optgroup 必须直接嵌套在 select 里，不能包在 div 或其他标签中
• 必须带 label 属性，比如 <optgroup label="前端技术"></optgroup>，否则不渲染标题
• optgroup 自身不可选、无 value、不提交，只起组织作用
• 内部只能放 option，不能嵌套另一个 optgroup 或 div
• 动态插入时，要用 select.add(optgroup)，不能用 appendChild()，否则 Chrome 报 DOMException

多选框/单选框必须用 fieldset 包裹

光靠相同 name 不算真正分组，fieldset 才是语义容器。没它，屏幕阅读器不知道这组 checkbox 是“兴趣爱好”还是“通知偏好”，后端也收不到数组。

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• fieldset 必须配 legend，且 legend 是第一个子元素，不可省略
• 同组所有 input 的 name 必须一致，且带方括号：比如 name="hobby[]"，否则 PHP/Node.js 只收到最后一个值
• 给 fieldset 加 disabled 会彻底禁用内部所有控件（包括 legend 点击），JS 事件也绑不上——想保留控制权，改用 aria-disabled="true" + CSS
• iOS Safari 中 legend 默认不响应点击，需额外加 cursor: pointer 和 user-select: none

别混用 optgroup 和 fieldset

它们适用场景完全不同，强行混用会导致表单行为异常。

• optgroup 只用于 select 内部，对 checkbox 或 radio 无效
• fieldset 不能塞进 select，否则 HTML 验证失败，部分浏览器直接忽略整个 select
• 有人试图用 fieldset 包 option，结果选项全消失——option 只能被 select 或 optgroup 直接包含
• 视觉分组需求（比如纯样式边框）不用 fieldset，改用 div + CSS，避免语义污染

最常被忽略的点：分组不只是为了好看。optgroup 影响 FormData 的遍历顺序，fieldset 决定后端是否能拿到数组；漏掉 legend 或写错 name[]，调试时根本看不出问题，只会在提交后发现数据丢了。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！