第34篇：AI辅助表单与表格生成实战

程序猿Top

195人浏览 · 2026-06-12 12:00:16

程序猿Top · 2026-06-12 12:00:16 发布

第34篇：AI辅助表单与表格生成实战

表单和表格是HTML中最繁琐、最容易出错的结构——让AI帮你生成骨架，你专注于审查和优化，是最高效的开发方式。

学习目标

掌握设计表单/表格类AI提示词的方法
学会让AI生成带验证属性的完整表单
学会让AI将Excel/JSON数据转换为语义化表格
理解如何在提示词中要求可访问性（label、fieldset、scope等）
能够审查和修正AI生成的表单/表格代码

核心知识点

一、表单生成：从需求到提示词

1. 基础表单提示词结构

生成表单时，提示词需要包含以下要素：

请生成一个[表单类型]的HTML表单，要求：

【字段清单】
- 字段名（input类型，是否必填，验证规则）
- ...

【结构要求】
- 使用 form + fieldset + legend 分组
- 每个 input 有关联的 label（for + id）
- 按钮显式声明 type

【验证要求】
- 必填字段用 required
- 格式限制用 pattern / type
- 长度限制用 minlength / maxlength

【可访问性】
- 为 fieldset 添加 aria-describedby
- 错误提示用 aria-live

2. 实战：复杂注册表单

你的提示词：

请生成一个会议报名注册表单的HTML代码。

字段清单：
1. 姓名（text，必填，2-20个汉字）
2. 手机号（tel，必填，中国大陆手机号）
3. 电子邮箱（email，必填）
4. 公司名称（text，必填）
5. 职位（text，选填）
6. 参会日期（date，必填，范围：2024-07-01 到 2024-07-03）
7. 饮食偏好（select：无特殊要求/素食/清真/过敏需备注）
8. 是否需要住宿（radio：是/否）
9. 备注（textarea，选填，最多200字）
10. 同意隐私政策（checkbox，必填）

结构要求：
- 分为"基本信息"和"参会信息"两个 fieldset
- 每个 input 必须有 label 关联
- 提交按钮和重置按钮

验证要求：
- 姓名 pattern="^[一-龥]{2,20}$"
- 手机号 pattern="^1[3-9]\d{9}$"
- 日期 min="2024-07-01" max="2024-07-03"
- 备注 maxlength="200"

请输出完整的、可直接运行的HTML代码。

AI生成结果（经优化）：

<form action="/register" method="POST" aria-label="会议报名注册">
  <!-- 基本信息 -->
  <fieldset>
    <legend>基本信息</legend>

    <div class="form-group">
      <label for="reg-name">姓名 *</label>
      <input
        type="text"
        id="reg-name"
        name="name"
        placeholder="请输入您的真实姓名"
        pattern="^[一-龥]{2,20}$"
        minlength="2"
        maxlength="20"
        title="请输入2-20个汉字"
        required
      >
    </div>

    <div class="form-group">
      <label for="reg-phone">手机号 *</label>
      <input
        type="tel"
        id="reg-phone"
        name="phone"
        placeholder="13800138000"
        pattern="^1[3-9]\d{9}$"
        title="请输入11位手机号码"
        required
      >
    </div>

    <div class="form-group">
      <label for="reg-email">电子邮箱 *</label>
      <input
        type="email"
        id="reg-email"
        name="email"
        placeholder="example@email.com"
        required
      >
    </div>

    <div class="form-group">
      <label for="reg-company">公司名称 *</label>
      <input
        type="text"
        id="reg-company"
        name="company"
        placeholder="请输入公司名称"
        required
      >
    </div>

    <div class="form-group">
      <label for="reg-title">职位</label>
      <input
        type="text"
        id="reg-title"
        name="title"
        placeholder="请输入您的职位"
      >
    </div>
  </fieldset>

  <!-- 参会信息 -->
  <fieldset>
    <legend>参会信息</legend>

    <div class="form-group">
      <label for="reg-date">参会日期 *</label>
      <input
        type="date"
        id="reg-date"
        name="date"
        min="2024-07-01"
        max="2024-07-03"
        required
      >
    </div>

    <div class="form-group">
      <label for="reg-diet">饮食偏好</label>
      <select id="reg-diet" name="diet">
        <option value="">请选择...</option>
        <option value="none">无特殊要求</option>
        <option value="vegetarian">素食</option>
        <option value="halal">清真</option>
        <option value="allergy">过敏需备注</option>
      </select>
    </div>

    <div class="form-group">
      <p id="accommodation-label">是否需要住宿 *</p>
      <label>
        <input type="radio" name="accommodation" value="yes" required>
        是
      </label>
      <label>
        <input type="radio" name="accommodation" value="no">
        否
      </label>
    </div>

    <div class="form-group">
      <label for="reg-notes">备注</label>
      <textarea
        id="reg-notes"
        name="notes"
        rows="4"
        maxlength="200"
        placeholder="如有特殊需求请在此说明（最多200字）"
      ></textarea>
    </div>
  </fieldset>

  <!-- 协议同意 -->
  <div class="form-group">
    <label>
      <input type="checkbox" name="agree" value="1" required>
      我已阅读并同意<a href="/privacy" target="_blank">隐私政策</a> *
    </label>
  </div>

  <div class="button-group">
    <button type="submit">提交报名</button>
    <button type="reset">重置表单</button>
  </div>
</form>

3. 提示词设计要点总结

要素	说明	示例
字段清单	列出每个字段的名称、类型、必填、规则	“姓名（text，必填，2-20个汉字）”
分组要求	明确 fieldset 分组逻辑	“分为基本信息和参会信息两个fieldset”
验证规则	给出具体的 pattern / min / max	`pattern="^[一-龥]{2,20}$"`
label关联	要求显式关联	“每个input必须有label（for+id）”
ARIA要求	提升可访问性	“form添加aria-label”
输出格式	要求可直接运行	“输出完整可运行的HTML”

二、表格生成：从数据到语义化表格

1. 基础表格提示词结构

请将以下数据转换为语义化HTML表格，要求：

【数据】
（粘贴CSV/JSON/文字描述）

【结构要求】
- 使用 thead + tbody + tfoot
- 表头用 th，数据用 td
- 为 th 添加 scope="col" 或 scope="row"
- 添加 caption 作为表格标题

【可访问性】
- 为复杂表头添加 id + headers 关联
- 数值列右对齐（用CSS类标记）

2. 实战：将Excel数据转为HTML表格

场景：你有一个员工信息表，需要转为网页展示。

你的提示词：

请将以下员工信息数据转换为语义化HTML表格。

数据内容（5列）：
- 员工编号（如：EMP001）
- 姓名
- 部门（技术部/市场部/人事部/财务部）
- 入职日期（YYYY-MM-DD格式）
- 月薪（数字，单位元）
- 状态（在职/试用期/已离职）

示例数据（3行）：
EMP001, 张三, 技术部, 2023-03-15, 15000, 在职
EMP002, 李四, 市场部, 2022-08-01, 12000, 在职
EMP003, 王五, 人事部, 2024-01-10, 10000, 试用期

要求：
1. 使用 table + thead + tbody + tfoot
2. 表头单元格用 th scope="col"
3. 添加 caption："员工信息汇总表"
4. tfoot 显示"共3名员工，平均月薪12333元"
5. 员工编号列数据用 code 标签包裹
6. 月薪列数据用 data value="数字" 包裹
7. 入职日期用 time datetime="YYYY-MM-DD"
8. 为表格添加 aria-label="员工信息表"
9. 已离职的行用 tr data-status="left"

请输出完整的HTML代码。

AI生成结果（经优化）：

<table aria-label="员工信息表">
  <caption>员工信息汇总表</caption>

  <thead>
    <tr>
      <th scope="col">员工编号</th>
      <th scope="col">姓名</th>
      <th scope="col">部门</th>
      <th scope="col">入职日期</th>
      <th scope="col">月薪</th>
      <th scope="col">状态</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td><code>EMP001</code></td>
      <td>张三</td>
      <td>技术部</td>
      <td><time datetime="2023-03-15">2023-03-15</time></td>
      <td><data value="15000">¥15,000</data></td>
      <td>在职</td>
    </tr>
    <tr>
      <td><code>EMP002</code></td>
      <td>李四</td>
      <td>市场部</td>
      <td><time datetime="2022-08-01">2022-08-01</time></td>
      <td><data value="12000">¥12,000</data></td>
      <td>在职</td>
    </tr>
    <tr data-status="probation">
      <td><code>EMP003</code></td>
      <td>王五</td>
      <td>人事部</td>
      <td><time datetime="2024-01-10">2024-01-10</time></td>
      <td><data value="10000">¥10,000</data></td>
      <td>试用期</td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <td colspan="6">共3名员工，平均月薪 ¥12,333</td>
    </tr>
  </tfoot>
</table>

3. 实战：复杂表头（合并单元格）

场景：季度销售报表，表头需要合并。

你的提示词：

请生成一个季度销售报表的HTML表格。

表头结构（需要合并单元格）：
- 第一行：产品名称 | 第一季度 | 第二季度 | 第三季度 | 第四季度 | 年度总计
- 注意："第一季度"要横跨"1月/2月/3月"三列，其他季度同理

实际表头（第二行）：
产品 | 1月 | 2月 | 3月 | 4月 | 5月 | 6月 | 7月 | 8月 | 9月 | 10月 | 11月 | 12月 | 总计

数据（3个产品）：
产品A：10, 12, 15, 14, 16, 18, 20, 22, 19, 21, 23, 25, 215
产品B：8, 9, 11, 10, 12, 13, 15, 14, 16, 17, 18, 20, 163
产品C：5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 136

要求：
1. 使用 colspan 合并季度表头
2. 表头用 th scope="col"，首列产品名用 th scope="row"
3. 总计列用 strong 或 th 强调
4. 添加 caption
5. 数值右对齐（用 class="num" 标记）
6. 为 thead 添加 aria-label="季度销售数据"

AI生成结果：

<table class="sales-report">
  <caption>2024年度产品销售报表（单位：万元）</caption>

  <thead>
    <!-- 季度分组行 -->
    <tr>
      <th scope="col" rowspan="2">产品名称</th>
      <th scope="colgroup" colspan="3">第一季度</th>
      <th scope="colgroup" colspan="3">第二季度</th>
      <th scope="colgroup" colspan="3">第三季度</th>
      <th scope="colgroup" colspan="3">第四季度</th>
      <th scope="col" rowspan="2">年度总计</th>
    </tr>
    <!-- 月份行 -->
    <tr>
      <th scope="col">1月</th>
      <th scope="col">2月</th>
      <th scope="col">3月</th>
      <th scope="col">4月</th>
      <th scope="col">5月</th>
      <th scope="col">6月</th>
      <th scope="col">7月</th>
      <th scope="col">8月</th>
      <th scope="col">9月</th>
      <th scope="col">10月</th>
      <th scope="col">11月</th>
      <th scope="col">12月</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row">产品A</th>
      <td class="num">10</td>
      <td class="num">12</td>
      <td class="num">15</td>
      <td class="num">14</td>
      <td class="num">16</td>
      <td class="num">18</td>
      <td class="num">20</td>
      <td class="num">22</td>
      <td class="num">19</td>
      <td class="num">21</td>
      <td class="num">23</td>
      <td class="num">25</td>
      <td class="num total"><strong>215</strong></td>
    </tr>

    <tr>
      <th scope="row">产品B</th>
      <td class="num">8</td>
      <td class="num">9</td>
      <td class="num">11</td>
      <td class="num">10</td>
      <td class="num">12</td>
      <td class="num">13</td>
      <td class="num">15</td>
      <td class="num">14</td>
      <td class="num">16</td>
      <td class="num">17</td>
      <td class="num">18</td>
      <td class="num">20</td>
      <td class="num total"><strong>163</strong></td>
    </tr>

    <tr>
      <th scope="row">产品C</th>
      <td class="num">5</td>
      <td class="num">6</td>
      <td class="num">7</td>
      <td class="num">8</td>
      <td class="num">9</td>
      <td class="num">10</td>
      <td class="num">11</td>
      <td class="num">12</td>
      <td class="num">13</td>
      <td class="num">14</td>
      <td class="num">15</td>
      <td class="num">16</td>
      <td class="num total"><strong>136</strong></td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <th scope="row">月度合计</th>
      <td class="num">23</td>
      <td class="num">27</td>
      <td class="num">33</td>
      <td class="num">32</td>
      <td class="num">37</td>
      <td class="num">41</td>
      <td class="num">46</td>
      <td class="num">48</td>
      <td class="num">48</td>
      <td class="num">52</td>
      <td class="num">56</td>
      <td class="num">61</td>
      <td class="num total"><strong>514</strong></td>
    </tr>
  </tfoot>
</table>

三、可访问性要求：如何在提示词中明确要求

1. 表单可访问性检查清单（用于提示词）

表单可访问性要求：
- [ ] 每个 input/select/textarea 都有关联的 label（for + id）
- [ ] radio 和 checkbox 组用 fieldset + legend 包裹
- [ ] 必填字段用 required 属性（不只是 * 号）
- [ ] 输入格式提示用 title 或 aria-describedby
- [ ] 错误提示区域用 aria-live="polite"
- [ ] 表单整体有 aria-label 或 aria-labelledby
- [ ] 按钮有明确的文字说明，不只是"提交"

2. 表格可访问性检查清单（用于提示词）

表格可访问性要求：
- [ ] 表头单元格用 th，数据单元格用 td
- [ ] th 有 scope="col" 或 scope="row"
- [ ] 复杂表头使用 scope="colgroup" / scope="rowgroup"
- [ ] 有 caption 描述表格内容
- [ ] 表格有 aria-label 或 aria-labelledby
- [ ] 嵌套表格时，内部表格有独立标题

3. 实战：要求AI生成带错误提示的可访问表单

你的提示词：

请生成一个带实时错误提示的登录表单。

字段：
1. 邮箱（email，必填）
2. 密码（password，必填，至少8位）

可访问性要求：
1. 每个输入框下方有一个错误提示区域（初始隐藏）
2. 错误提示区域用 aria-live="polite"，id="xxx-error"
3. 输入框用 aria-describedby 关联错误提示区域
4. 错误提示区域初始状态 aria-hidden="true"
5. 提交按钮文字为"登录账号"

结构示例：
<div class="form-group">
  <label for="email">邮箱</label>
  <input id="email" aria-describedby="email-error">
  <div id="email-error" class="error" aria-live="polite" aria-hidden="true"></div>
</div>

AI生成结果：

<form action="/login" method="POST" aria-label="用户登录">
  <fieldset>
    <legend>登录账号</legend>

    <div class="form-group">
      <label for="login-email">邮箱 *</label>
      <input
        type="email"
        id="login-email"
        name="email"
        placeholder="请输入邮箱地址"
        aria-describedby="email-error"
        required
      >
      <div
        id="email-error"
        class="error-message"
        aria-live="polite"
        aria-hidden="true"
      >
        请输入有效的邮箱地址
      </div>
    </div>

    <div class="form-group">
      <label for="login-password">密码 *</label>
      <input
        type="password"
        id="login-password"
        name="password"
        placeholder="至少8位字符"
        minlength="8"
        aria-describedby="password-error password-hint"
        required
      >
      <div id="password-hint" class="hint">密码至少8位，包含字母和数字</div>
      <div
        id="password-error"
        class="error-message"
        aria-live="polite"
        aria-hidden="true"
      >
        密码不能为空，且至少8位
      </div>
    </div>

    <div class="form-group">
      <label>
        <input type="checkbox" name="remember">
        记住我
      </label>
    </div>

    <button type="submit">登录账号</button>
  </fieldset>
</form>

四、数据转换：从Excel/JSON到HTML

1. 直接粘贴数据法

当数据量不大时，直接把数据粘贴到提示词中：

请将以下CSV数据转换为HTML表格：

姓名,年龄,城市,职业
张三,28,北京,工程师
李四,32,上海,设计师
王五,25,深圳,产品经理

要求：
1. 语义化表格结构
2. 表头用 th scope="col"
3. 添加 caption

2. JSON数据转换

请将以下JSON数据转换为HTML表格：

[
  {"产品": "笔记本", "销量": 1200, "库存": 500, "状态": "充足"},
  {"产品": "鼠标", "销量": 3500, "库存": 200, "状态": "紧张"},
  {"产品": "键盘", "销量": 2100, "库存": 800, "状态": "充足"}
]

要求：
1. 销量和库存列右对齐
2. 状态为"紧张"的行标记 class="warning"
3. 表头用 th scope="col"
4. 产品列用 th scope="row"

AI生成结果：

<table>
  <caption>产品销售统计表</caption>
  <thead>
    <tr>
      <th scope="col">产品</th>
      <th scope="col">销量</th>
      <th scope="col">库存</th>
      <th scope="col">状态</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">笔记本</th>
      <td class="num">1,200</td>
      <td class="num">500</td>
      <td><span class="status-ok">充足</span></td>
    </tr>
    <tr class="warning">
      <th scope="row">鼠标</th>
      <td class="num">3,500</td>
      <td class="num">200</td>
      <td><span class="status-warn">紧张</span></td>
    </tr>
    <tr>
      <th scope="row">键盘</th>
      <td class="num">2,100</td>
      <td class="num">800</td>
      <td><span class="status-ok">充足</span></td>
    </tr>
  </tbody>
</table>

3. 描述数据让AI生成示例数据

当你没有现成数据时，可以让AI根据描述生成：

请生成一个课程表HTML表格。

课程安排：
- 周一至周五，每天4节课（上午2节，下午2节）
- 课程包括：语文、数学、英语、物理、化学、体育、音乐
- 请生成合理的示例数据

要求：
1. 表头：时间 | 周一 | 周二 | 周三 | 周四 | 周五
2. 第一列是时间（如 8:00-9:40），用 th scope="row"
3. 每天第一行显示"上午"，第二行显示"下午"（用rowspan）
4. 体育课用 class="pe" 标记
5. 添加 caption="高二(3)班课程表"

五、审查AI输出：表单/表格专用检查清单

拿到AI生成的代码后，按以下清单审查：

表单审查清单

检查项	合格标准
容器	所有控件在 `<form>` 内
分组	相关字段用 `<fieldset>` + `<legend>`
Label	每个 input/select/textarea 有 `<label>`
关联	label 的 `for` 等于 input 的 `id`
类型	使用正确的 `type`（email/tel/date等）
必填	必填字段有 `required`
验证	有 `pattern` / `minlength` / `max` 等
按钮	按钮有显式 `type`
Name	每个控件有 `name` 属性
ARIA	有需要时添加了 `aria-describedby`

表格审查清单

检查项	合格标准
结构	有 `thead` + `tbody`（+ `tfoot`）
标题	有 `<caption>`
表头	表头单元格用 `th`
Scope	`th` 有 `scope="col"` 或 `scope="row"`
数据	数据单元格用 `td`
合并	`colspan`/`rowspan` 计算正确
语义	数值用 `<data>`，日期用 `<time>`
代码	代码类数据用 `<code>`

动手练习

练习 1：设计一个提示词生成调查问卷

你需要一个在线调查问卷，包含：

单选题（5道）：满意度评分（1-5分）
多选题（2道）：喜欢的功能（可多选）
填空题（2道）：建议和联系方式
所有题目必须填完才能提交

请设计一个完整的AI提示词，要求生成语义化、可访问性良好的表单。

参考答案

提示词设计：

请生成一个产品满意度调查问卷的HTML表单。

题目清单：

单选题（每题5个选项：非常不满意/不满意/一般/满意/非常满意）：
1. 您对产品的整体满意度？（name="q1"）
2. 您对产品的易用性满意度？（name="q2"）
3. 您对产品的性能满意度？（name="q3"）
4. 您对客服响应速度的满意度？（name="q4"）
5. 您对价格的满意度？（name="q5"）

多选题（可多选）：
6. 您最常用的功能有哪些？（name="features"）
   选项：文件管理 / 数据分析 / 团队协作 / 报表导出 / 消息通知
7. 您希望新增哪些功能？（name="new_features"）
   选项：移动端App / API接口 / 自动化工作流 / 多语言支持 / 第三方集成

填空题：
8. 您对产品有什么建议？（textarea，name="suggestion"，必填，最多500字）
9. 您的邮箱（方便我们联系您，email，必填）

结构要求：
- 单选题每组用 fieldset + legend 包裹
- 每个 radio 和 checkbox 有 label 关联
- 所有题目必填
- 提交按钮文字"提交问卷"，重置按钮"清空重填"
- 表单添加 aria-label="产品满意度调查"

请输出完整HTML代码。

练习 2：修正AI生成的表格

AI生成了以下表格代码，请找出所有问题并修正：

<table>
  <tr>
    <td>姓名</td>
    <td>语文</td>
    <td>数学</td>
    <td>英语</td>
  </tr>
  <tr>
    <td>张三</td>
    <td>90</td>
    <td>85</td>
    <td>88</td>
  </tr>
  <tr>
    <td colspan="4">平均分：87.7</td>
  </tr>
</table>

参考答案

问题列表：

问题	修正
无 caption	添加 `<caption>成绩表</caption>`
无 thead/tbody/tfoot	添加语义分组
表头用 td	改为 `th scope="col"`
姓名列不是表头	改为 `th scope="row"`
无 scope 属性	为所有 th 添加 scope
平均分在 tbody 中	应放入 `tfoot`
数值未语义化	可用 `data` 标签

修正后代码：

<table>
  <caption>2024年期末考试成绩表</caption>

  <thead>
    <tr>
      <th scope="col">姓名</th>
      <th scope="col">语文</th>
      <th scope="col">数学</th>
      <th scope="col">英语</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row">张三</th>
      <td><data value="90">90</data></td>
      <td><data value="85">85</data></td>
      <td><data value="88">88</data></td>
    </tr>
  </tbody>

  <tfoot>
    <tr>
      <th scope="row">平均分</th>
      <td colspan="3">87.7</td>
    </tr>
  </tfoot>
</table>

练习 3：将JSON数据转为带排序标记的表格

给定以下JSON数据，设计提示词让AI生成一个带排序功能的表格结构（HTML+ARIA）：

[
  {"name": "张三", "department": "技术部", "salary": 15000, "join_date": "2023-03-15"},
  {"name": "李四", "department": "市场部", "salary": 12000, "join_date": "2022-08-01"},
  {"name": "王五", "department": "人事部", "salary": 10000, "join_date": "2024-01-10"}
]

要求表格表头可点击排序，并为排序按钮添加正确的ARIA属性。

参考答案

提示词设计：

请将以下JSON数据转换为HTML表格，并添加排序功能结构。

数据：
[
  {"name": "张三", "department": "技术部", "salary": 15000, "join_date": "2023-03-15"},
  {"name": "李四", "department": "市场部", "salary": 12000, "join_date": "2022-08-01"},
  {"name": "王五", "department": "人事部", "salary": 10000, "join_date": "2024-01-10"}
]

要求：
1. 表头每个列标题内包含一个 button，用于排序
2. 排序按钮添加 aria-label="按[列名]排序"
3. 当前排序列的按钮添加 aria-pressed="true"，其他为"false"
4. 表格添加 aria-label="员工信息表"
5. 表头用 th scope="col"，姓名列用 th scope="row"
6. 工资用 data value="数字"，日期用 time datetime
7. 为 thead 添加 aria-label="表头，可点击排序"

表头结构示例：
<th scope="col">
  <button aria-label="按姓名排序" aria-pressed="false">姓名</button>
</th>

生成的表格结构：

<table aria-label="员工信息表">
  <caption>员工信息表（点击表头排序）</caption>

  <thead aria-label="表头，可点击排序">
    <tr>
      <th scope="col">
        <button aria-label="按姓名排序" aria-pressed="false">
          姓名 <span aria-hidden="true">↕</span>
        </button>
      </th>
      <th scope="col">
        <button aria-label="按部门排序" aria-pressed="false">
          部门 <span aria-hidden="true">↕</span>
        </button>
      </th>
      <th scope="col">
        <button aria-label="按工资排序" aria-pressed="true">
          工资 <span aria-hidden="true">↑</span>
        </button>
      </th>
      <th scope="col">
        <button aria-label="按入职日期排序" aria-pressed="false">
          入职日期 <span aria-hidden="true">↕</span>
        </button>
      </th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <th scope="row">王五</th>
      <td>人事部</td>
      <td><data value="10000">¥10,000</data></td>
      <td><time datetime="2024-01-10">2024-01-10</time></td>
    </tr>
    <tr>
      <th scope="row">李四</th>
      <td>市场部</td>
      <td><data value="12000">¥12,000</data></td>
      <td><time datetime="2022-08-01">2022-08-01</time></td>
    </tr>
    <tr>
      <th scope="row">张三</th>
      <td>技术部</td>
      <td><data value="15000">¥15,000</data></td>
      <td><time datetime="2023-03-15">2023-03-15</time></td>
    </tr>
  </tbody>
</table>

注意：排序功能本身需要JavaScript实现，但HTML结构和ARIA属性可以为后续的JS开发提供良好的基础。

常见误区 ⚠️

误区	正确理解
“AI生成的表单直接能用”	必须审查label关联、required、name等属性
“表格只要显示正确就行”	必须检查th/scope/caption等可访问性属性
“提示词越简单AI越聪明”	表单/表格需要结构化、详细的提示词
“pattern验证可以替代后端”	HTML验证只是第一道防线，后端必须再验证
“fieldset只是画框”	它有语义，表示一组相关控件
“表格排序只需要JS”	排序按钮必须有ARIA属性告知屏幕阅读器
“数据转换不需要审”	AI可能搞错colspan计算或scope方向
“placeholder可以代替label”	绝对不行！placeholder只是提示

速查卡片 📋

表单提示词模板

请生成一个[表单名称]的HTML表单。

字段清单：
- [字段名]（[type]，[必填/选填]，[验证规则]）

结构要求：
- 使用 form + fieldset + legend 分组
- 每个 input 有 label（for + id）关联
- 按钮显式声明 type

验证要求：
- 必填字段用 required
- 格式限制用 pattern / type
- 长度限制用 minlength / maxlength

可访问性：
- form 添加 aria-label
- 错误提示用 aria-live

表格提示词模板

请将以下数据转换为语义化HTML表格。

数据：
[粘贴数据]

要求：
- 使用 thead + tbody + tfoot
- 表头用 th scope="col"
- 行标题用 th scope="row"
- 添加 caption
- 数值用 data，日期用 time

表单审查速查

检查项	标记
form 包裹	✅
fieldset + legend	✅
label for = input id	✅
正确的 type	✅
required	✅
pattern / minlength	✅
name 属性	✅
button type	✅

表格审查速查

检查项	标记
caption	✅
thead + tbody	✅
th scope=“col”	✅
th scope=“row”	✅
tfoot（如需要）	✅
colspan/rowspan 正确	✅

扩展阅读

下一篇：第35篇：AI辅助代码审查与优化

AtomGit开源社区

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。

更多推荐

DevOps 生态介绍（十三）：Uptime Kuma 监控小工具推荐

AtomGit开源社区

第13讲：异步任务队列与长任务处理——Celery + Redis实战

欢迎来到《Python + AI Agent 实战开发完全指南》专栏！在前面的课程中，我们使用 FastAPI 将多智能体系统封装为了 RESTful API。但在真实的生产环境中，AI 推理和多智能体协作往往需要几秒甚至几分钟的时间。如果用户在发起请求后一直等待 HTTP 响应，不仅体验极差，还容易导致网关超时（Timeout）或服务器线程阻塞。在这一讲中，我们将引入工业界标准的解决方案：异步任

AtomGit开源社区

浏览器中使用AI开发好的插件实现自动报销

每月报销，程序员的"至暗时刻"不知道有多少人和我一样，每个月最痛苦的事不是写代码，而是——报销。出差一趟回来，攒了一堆PDF票据：高铁票、打车行程单、酒店发票、餐饮发票……然后打开蓝凌OA，开始手动填表。一张高铁票要填出发地、到达地、日期、舱位、金额，一个行程对应多笔费用，一行一行地敲，一个下拉框一个下拉框地选。遇到那种搜索式下拉框，还得先输入关键字、等加载、再点选——手指头都快敲出茧子了。最崩溃