2.4 表格与表单：数据录入的两套方案
2.4 表格与表单：数据录入的两套方案
本节摘要：表格负责展示成批的结构化数据，表单负责收集用户的输入，一读一写构成页面的数据两面。本节搭出看板的核心结构——工单表格与新增工单表单，讲清表格的三段式语义骨架、表头单元格与数据单元格的分工，以及表单控件的选型逻辑与标签关联技术。这两块结构是第 4 章行为班操作最多的舞台。
一读一写：两套数据结构
车间主任每天对看板做两件事：看一眼今天的工单，登记一条新工单。前者是读，交给表格；后者是写，交给表单。两套结构在语义上是镜像关系：表格把数据字段排成列让人浏览，表单把数据字段排成控件让人填写。理解了镜像关系，控件选型就有了参照——表格里的每一列，几乎都能在表单里找到对应的输入控件。
图 1：表格的三段式语义骨架
图中最下面一行点出了要害：表格在历史上曾被滥用为布局工具（把整个页面切成大表格摆位置），那是对语义的背叛。现代标准里表格只做一件事——展示二维数据。判断标准：你的内容能画进电子表格软件且每列有列名，它就是表格；反之它是布局，该用 3.4 节的布局机械来做。
搭出工单表格
按语义骨架搭看板的核心表格，注意每层结构的注释：
<!-- 工单表格：看板的主数据区 --> <table> <caption>三车间 · 今日加工工单</caption> <!-- 表题：整张表的说明，搜索与读屏都会引用它 --> <thead> <tr> <!-- tr：一行；表头行里全是表头单元格 --> <th scope="col">编号</th> <!-- th：表头单元格；scope 声明它管的是一列 --> <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>MO-1042</td> <td>凸轮轴</td> <td>精铣</td> <td>陈师傅</td> <td>加急</td> <td>加工中</td> </tr> <tr> <td>MO-1043</td> <td>导套</td> <td>热处理</td> <td>刘师傅</td> <td>常规</td> <td>待开工</td> </tr> </tbody> <tfoot> <tr> <td colspan="6">合计：加急 1 条，常规 1 条</td> <!-- colspan 让此格横跨六列，合计行常用 --> </tr> </tfoot> </table>
表格验收清单： - 表头单元格管列名，数据单元格管值，不混用（外观差异交给样式班） - 每行单元格数量一致，跨行跨列有明确语义理由 - 状态列的取值收敛在固定集合里（待开工/加工中/已完成）， 为第 4 章行为班的"换徽章"逻辑打好地基 - 表格外层不套多余容器，宽度策略交给样式班
搭出新增工单表单
表单是数据录入的容器，真正的输入靠控件：单行文本、下拉选择、单选组、多行文本、提交按钮。控件选型的逻辑与表格列一一对应——产品名是自由文本，工序从固定流程里选，优先级在两档里选，备注可能很长。每选对一次控件，用户的输入成本就降一截，输错的概率也小一分。
表单结构里最关键的技术是标签关联：每个输入控件都要有一个可点击的文字标签与它绑定。绑定的收益有三层：点击文字即可聚焦输入框（触屏用户少一次精准戳击）；读屏软件朗读时把标签与控件作为一个整体报出；行为班做校验报错时能精确定位到控件。
<!-- 新增工单表单：控件的选型逐列对照表格 --> <form id="new-order-form"> <!-- form：表单容器；id 留给行为班拦截提交事件 --> <p> <label for="product">产品名称</label> <!-- label 的 for 值 = 控件的 id：完成绑定 --> <input type="text" id="product" name="product" required> <!-- 单行文本：自由输入；required 声明必填， 浏览器会在提交时自动拦一道（行为班后面再补体验更好的校验） --> </p> <p> <label for="process">加工工序</label> <select id="process" name="process"> <!-- 下拉选择：取值固定，从五道工序里选 --> <option value="milling">精铣</option> <option value="heat">热处理</option> <option value="qc">终检</option> </select> </p> <fieldset> <!-- fieldset：把一组相关控件圈成一组 --> <legend>优先级</legend> <!-- legend：这组控件的组名 --> <label><input type="radio" name="priority" value="urgent"> 加急</label> <label><input type="radio" name="priority" value="normal" checked> 常规</label> <!-- 同名单选互斥；checked 声明默认项。 label 直接包裹控件也是合法的关联方式 --> </fieldset> <p> <label for="note">备注</label> <textarea id="note" name="note" rows="3" cols="30"></textarea> <!-- 多行文本：备注可能长，给足空间 --> </p> <button type="submit">登记工单</button> <!-- 提交按钮：默认类型就是提交，写明类型是好习惯 --> </form>
<!-- 控件选型的三个反面案例 --> <input type="text" id="status"> <!-- 反面一：状态只有三个取值却用自由文本，用户手滑打出"已完城"， 行为班后续的判断逻辑全部失守；固定取值应用下拉或单选 --> <label>优先级</label> <input type="radio" name="p" value="u"> 加急 <!-- 反面二：标签没绑定控件（缺 for 与 id 的对应）， 点击文字无反应，读屏读不出对应关系 --> <input type="text" id="phone" name="phone"> <!-- 反面三：要求填数字编号却用普通文本框， 移动端不会弹出数字键盘；数字类输入应声明合适的输入类型 -->
对照表格逐列回头检验表单的选型：产品名文本、工序下拉、优先级单选组、备注多行——每列各得其所。反面案例的三类错误分别对应"取值不收敛、绑定缺失、类型错配"，也是表单评审时最常打回的三类问题。
⚠️ 常见坑：浏览器自带的必填拦截只在"提交"时触发，且各浏览器提示样式不一；它是安全网而不是体验方案。正式的即时校验与红字提示由行为班在第 4 章实现，结构班现在的职责是把字段名、必填性这些"契约信息"用结构写清楚。
💡 关键直觉：表单控件是浏览器预制好的标准件，每种控件自带键盘行为、移动端键盘与读屏朗读方式。选对控件等于免费获得全部无障碍行为；用文本框模拟下拉，这些福利一样都拿不到。
本节要点回顾
- 镜像关系：表格列与表单控件一一对应，读写的两端共享同一套字段设计；
- 表格语义：表题、表头、表体、表尾四段骨架，表头声明字段、表体装数据；
- 表格纪律：只用于二维数据展示，不当布局工具；行内单元格数一致；
- 标签关联：每个控件绑定文字标签，点击聚焦、读屏成组、报错定位三重收益；
- 控件选型：自由值用文本、固定值用下拉或单选、长文本用多行框、数字类型要声明；
- 字段契约：必填性等约束先用结构声明，浏览器拦截是安全网，体验校验归行为班。
读写两套结构就位，下一节处理最后一批零件：音视频与嵌入内容，随后进入结构班的总装验收。