还在用 `<div>` 配合复杂的 JavaScript 状态管理来写折叠面板吗？HTML 原生提供的 `<details>` 元素，不仅能零代码实现展开/收起，配合 `name` 属性更能轻松构建互斥手风琴。本文将带你全面认识这一被低估的原生组件，并通过三个实战案例，彻底掌握它的使用技巧。

还在用 `<div>` 配合复杂的 JavaScript 状态管理来写折叠面板吗？HTML 原生提供的 `<details>` 元素，不仅能零代码实现展开/收起，配合 `name` 属性更能轻松构建互斥手风琴。本文将带你全面认识这一被低估的原生组件，并通过三个实战案例，彻底掌握它的使用技巧。

本文聚焦HTML表单与交互式元素的核心机制。表单部分重点解析submit()与requestSubmit()的本质差异——前者跳过验证，后者执行完整验证并触发事件；涵盖<input>的多种类型特性，以及滑块、智能提示、文件上传等实用场景。交互式元素部分以<details>的name属性实现手风琴菜单为核心，展示无需JavaScript的折叠交互；通过<dialog>与popover演示弹窗的声明式