表单语义化需以<form>为原生主容器，依上下文选用<article>或<section>包裹，内部必用显式label绑定控件，辅助信息按角色归位，提交区用<form>内<footer>标识。
表单区域的语义化不是给整个 <form> 外套个 <section> 就完事——关键在于让每个组成部分都有明确角色，机器能识别、人能一眼理清逻辑、残障用户能顺畅操作。
用 form 本身作为语义主容器
<form> 已是原生语义标签，它天然代表“一个可提交的交互单元”。无需额外用 <div class="form-wrapper"> 包裹；若需视觉分组或样式隔离，优先用 <section> 或 <article>，但前提是它们符合语义规则：
- 如果该表单是独立可复用的内容（如“用户注册”“商品评论提交”），且有自己标题（
<h2>注册账号</h2>），外面套<article>更准确； - 如果表单属于某大模块的一部分（如“订单填写”是结账流程中的一个环节），用
<section>并配<h3>收货信息</h3>更合适； - 避免把
<form>塞进<header>或<footer>——除非它真是页眉里的搜索框、页脚里的订阅输入框这类轻量级功能型表单。
表单内部必须绑定 label，禁用“裸 input”
每个可交互控件（<input>、<select>、<textarea>）都必须有对应的 <label>，且通过 for 和 id 显式关联。这是语义化的底线，直接影响屏幕阅读器播报和移动端点击热区：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- ✅ 正确：
<label for="email">邮箱地址</label><input type="email" id="email" name="email">； - ❌ 错误：
<input type="text" placeholder="请输入邮箱">（无 label、placeholder 不替代 label）； - ⚠️ 注意：
<fieldset>+<legend>是为一组相关控件（如多项选择）提供语义分组，不是装饰性边框——<legend>就是这组的标题，必须存在。
辅助信息按角色归位，不塞进 main 表单流
表单常带说明文字、错误提示、成功反馈、隐私条款链接等。这些不能全堆在 <form> 里乱放，要按语义归属到对应位置：
立即学习“前端免费学习笔记（深入）”；
- 全局说明（如“*为必填项”）放在
<form>开头，用<p>或<div role="note">； - 字段级提示（如密码强度要求）放在对应
<label>之后、<input>之前，用<small>或<p class="hint">； - 实时验证错误信息，用
<span role="alert" aria-live="polite">插入对应字段旁； - 隐私政策、服务条款等法律文本，用
<aside>包裹并放在<form>外部底部——它相关但可分离，不属于表单核心操作流。
提交区域单独语义化，别混进导航或页脚
提交按钮、重置按钮、返回链接等操作控件，应统一放在表单末尾，用 <footer>（注意：是 <form> 内部的 <footer>，不是页面级页脚）包裹：
-
<form>...<footer><button type="submit">立即注册</button></footer></form>； - 这个
<footer>表示“本表单的操作归属区”，语义清晰，读屏器会识别为动作集合； - 不要把它丢进页面级
<nav>或<footer>里——那会让辅助技术误判为全局导航或版权信息。
