html标签如何创建交互式控件_fieldset与legend组合【教程】-html教程-PHP中文网

点击 legend 无反应因其默认不可交互，需手动添加 tabindex="0" 和事件监听；fieldset[disabled] 递归禁用直属表单控件但不隐藏；legend 必为 fieldset 首子元素以保障读屏器正确播报；替换 legend 文字时需注意其作为替换元素的特殊盒模型行为。

html标签如何创建交互式控件_fieldset与legend组合【教程】

用 `fieldset` 包裹表单控件时，为什么点击 `legend` 没反应？

因为 legend 默认不是可交互元素，它只是标题，不自动绑定任何控件。想实现点击标题展开/收起或聚焦第一个输入框，得手动加逻辑。

最常用做法是给 legend 加 tabindex="0"，再监听 click 或 keydown（支持空格/回车）
如果目标是聚焦内部第一个可聚焦元素，别直接用 focus()，先检查是否已渲染、是否被 display: none 或 disabled 阻断
注意 Safari 对 legend 的 click 事件支持不稳定，建议统一用 addEventListener('click', ...) 而非 onclick 属性

`fieldset` 的 `disabled` 属性到底禁用哪些东西？

它会递归禁用所有直属子级表单控件（input、select、textarea、button），但不会影响嵌套在 div 或 p 里的控件——这点常被忽略。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

被禁用的控件会变灰、失去焦点、不触发表单提交事件，且其值不会被 form.submit() 或 FormData 收集
legend 文字也会变灰，但仍是可点击的（除非你额外加了 pointer-events: none）
不要指望靠 fieldset[disabled] 来“视觉隐藏”控件，它只禁用，不隐藏；要隐藏请用 hidden 或 display: none

如何让 `fieldset` + `legend` 在屏幕阅读器中正确播报？

默认行为基本可用，但有三个关键点决定实际体验：

legend 必须是 fieldset 的**第一个子元素**，否则部分读屏器（如 NVDA）可能跳过或误读
避免在 legend 里塞 span 或图标字体，它们可能被读成乱码；如需装饰，用伪元素 ::before 或 aria-hidden="true"
如果 fieldset 动态显示/隐藏，记得同步更新 aria-expanded 和 aria-controls，否则读屏器无法感知状态变化

替换 `legend` 文字时，为什么样式错乱或布局塌陷？

legend 是个替换元素（replaced element），它的默认样式和盒模型跟普通块元素不同，尤其在 Flex/Grid 容器中容易出问题。

不要对 legend 直接设 display: flex 或 display: grid，会导致内部文字换行异常；改用 display: inline-flex + align-items: center
修改字体大小后，legend 的垂直对齐可能偏移，用 line-height 或 margin-top 微调比 transform: translateY() 更稳妥
如果用 JS 替换 legend.textContent，记得保留原始空格和换行符，否则 CSS 的 white-space: nowrap 可能失效