表格不提交数据，只有form能提交；input必须在form内且有name属性，否则后端收不到值；form需包裹整个table或含输入的tr/thead，不可拆分嵌套；name是提交关键，id无效；td内放input语法合法但影响可访问性与响应式。
表格本身不提交数据，<form> 才是提交的载体；把 <input> 放进 <td> 里没问题，但必须确保它被包裹在 <form> 内，且有 name 属性，否则后端收不到值。
INPUT 必须放在 FORM 标签下才能提交
很多人误以为只要 <input> 在 <td> 里就能随表格一起提交——其实不行。浏览器只认 <form> 的边界，所有可提交控件（<input>、<select>、<textarea>）必须是它的直接或间接子元素。
-
<form>要包住整个<table>，或者至少包住含输入控件的<tr>或<tbody> - 不要把
<form>拆成多个小块塞进不同<td>—— HTML 规范禁止<form>嵌套，也不允许它打断<table>的结构层级（比如不能插在<tr>中间） - 常见错误：
<td><form><input name="x"></form></td>—— 这会导致每个单元格一个表单，提交时各自发请求，无法批量处理
INPUT 的 name 属性决定后端能否收到数据
name 是唯一让浏览器把输入值打包进请求的关键。没有 name，哪怕用户输了一百个字，submit 后后端也收不到这个字段。
-
<input type="text" name="username">→ 后端收到username=xxx -
<input type="text" id="username">→ 后端收不到，id只用于 JS 或 CSS 定位 - 单选组（
radio）和复选组（checkbox）必须同名，靠value区分选项：<input type="radio" name="gender" value="male"> - 多行文本用
<textarea name="desc">，不是input
TD 内放 INPUT 的实际限制与注意事项
<td> 允许嵌套任意内容，放 <input> 没语法问题，但布局和语义上容易踩坑：
立即学习“前端免费学习笔记（深入）”；
- 可访问性弱：屏幕阅读器可能无法自动关联
<th>和对应<td>里的<input>，建议加<label for="xxx">显式绑定 - 响应式困难：表格在小屏上容易横向溢出，
overflow-x: auto只能滚动，不能重排；现代项目更倾向用display: grid或flex模拟表格对齐 - 跨行/跨列合并（
rowspan/colspan）后，<input>位置易错乱，尤其配合vertical-align时 - 不要用
<table>做整体页面布局——它不是为 UI 结构设计的，仅适合真正二维数据展示场景（如后台配置表、报表编辑）
提交前用 JavaScript 拦截验证的必要性
即使 HTML 层面写了 required 或 pattern，也不能替代 JS 拦截：默认提交会跳转或刷新页面，掩盖校验逻辑。
- 给
<form>绑定onsubmit，第一时间调用event.preventDefault() - 用
form.elements或form.querySelectorAll('input[name]')遍历取值，比手动找 DOM 更可靠 - 批量提交时注意：同名
checkbox多选会生成数组，但原生FormData默认只取第一个，需手动收集所有勾选项 - 调试技巧：在控制台打印
new FormData(form)的键值对，确认字段名和值是否符合预期
真正麻烦的从来不是把 <input> 塞进 <td>，而是后续的数据映射、空值处理、多行同步提交以及无障碍支持——这些在表格结构里比在 Flex/Grid 中更难收敛。
