复杂表单需按信息流和语义逻辑组织：用或作主容器，管多步导航，配标题分组，精准表达控件组，承载辅助说明，/规范顶部与底部区域，嵌套须符合层级关系，并辅以aria增强可访问性。
复杂表单不是“堆字段”的容器，而是有明确信息流和逻辑分组的交互结构。用语义化标签划分，关键不是把视觉区块套上标签，而是按用户填写路径和数据语义来组织。
先识别表单中的功能角色
别一上来就写 <section></section>。先问清楚每个区域在业务中承担什么职责：
-
表单主体：唯一且不可嵌套，必须用
<main></main>包裹整个表单（如果该页核心就是这个表单）；否则用<form></form>自身作为语义锚点，它已是独立交互单元 -
步骤导航：多步表单的进度条或步骤指示，属于主导航范畴，应使用
<nav aria-label="填写步骤"></nav>，内部用带aria-current的链接或列表 -
分组区域：如“联系信息”“收货地址”“支付方式”，每组有明确主题和标题，适合用
<section></section>，且必须配<h2></h2>或更合适的层级标题 -
辅助说明：字段旁的提示、合规声明、示例文本等，不属于主流程但影响理解，用
<aside></aside>（放在对应<section></section>内或紧邻<form></form>）
避免常见误用
很多表单语义混乱，根源在于混淆了视觉分组和逻辑分组：
- 不用
<div class="row"> 套多个字段——若这行只是为栅格对齐，保留 <code><div> 即可；只有当它构成一个语义单元（比如“证件类型+证件号”组合），才考虑用 <code><section></section>或<fieldset></fieldset> -
<fieldset></fieldset>和<legend></legend>是表单原生语义标签，比<section></section>更精准表达“一组相关控件”，尤其适合单选/复选组、地址字段组等 -
<header></header>可用于表单顶部区域（含标题、副标题、操作按钮），但不要把它当成“样式头部”——如果只是加个背景色的 div，就不该用<header></header> -
<footer></footer>适合放提交按钮、取消链接、隐私政策链接等收尾动作，放在<form></form>底部或某个<section></section>尾部都合理 -
<form></form>下直接子元素可以是<header></header>、<section></section>、<fieldset></fieldset>、<footer></footer>，不建议再套一层<main></main>（<form></form>本身已是主交互容器） - 每个
<section></section>内部如果有子分组（如“收货地址”下分“省市区”三级联动），优先用<fieldset></fieldset>+<legend></legend>，而不是嵌套<section></section> -
<aside></aside>可以出现在<section></section>内（如某组字段旁的说明），也可以在<form></form>外（如整表单右侧的合规提示栏），但不能包裹提交按钮这类主操作 - 为
<nav></nav>加aria-label="填写步骤"，让屏幕阅读器明确这是导航而非内容 - 用
aria-describedby关联提示文本与输入框，比单纯靠<aside></aside>更可靠 - 动态步骤切换时，更新
aria-current="step"和aria-disabled状态，确保辅助技术同步感知流程 - 错误提示区域用
role="alert"或aria-live="polite"，配合<section></section>或<div> 都可，重点是行为而非标签 </div>
嵌套要符合逻辑层级
语义标签的嵌套不是越深越好，而是要反映真实内容关系：
配合 ARIA 提升可访问性
语义标签打基础，ARIA 补细节。复杂表单尤其需要：
