必须用 display: flex 布局使复选框与 textarea 在同一 内并排显示，二者须均为 直接子元素；需包裹 checkbox 于 、设 textarea min-height、提交前 trim 校验空值。
不能直接把 textarea 放在复选框同一 <td> 里再“并排显示”——浏览器默认会垂直堆叠，且没有原生的行内对齐机制。必须用 CSS 控制布局，否则文本域会换行、撑开单元格、破坏表格结构。
<h3>复选框和文本域必须共存于同一个 <code><td> 内
<p>HTML 表格规范要求所有表单控件（包括 <code>input 和 textarea）必须严格嵌套在 <td> 或 <code><th> 中。若把 <code>textarea 放到 <tr> 级或表格外，会导致 DOM 结构非法，部分浏览器自动修正但行为不可靠，JS 也难以准确获取关联数据。
<ul><li>✅ 正确：复选框 + <code>textarea 都是 <td> 的直接子元素
<li>❌ 错误：<code>textarea 写在 <tr> 下、或用 <code>position: absolute 脱离文档流“贴”过去
textarea 默认是块级元素，不加样式就会独占一行，视觉上看起来像“在下一行”，而非“旁边”用 display: flex 实现真正的并排布局
仅靠 float 或 inline-block 容易因换行、垂直对齐、间隙等问题失效；flex 是目前最稳定可控的方式。需给 <td> 设置 <code>display: flex，并约束子元素尺寸。
- 给
<td> 添加 <code>style="display: flex; align-items: center; gap: 8px;" - 为
<input type="checkbox">设固定宽高（如width: 18px; height: 18px;），避免被拉伸 - 为
<textarea></textarea>设flex: 1或固定width（如width: 120px;），防止它占满整行 - 避免用
cols/rows控制大小——它们只影响默认渲染，不响应 flex 布局
示例片段：
立即学习“前端免费学习笔记（深入）”；
<td style="display: flex; align-items: center; gap: 8px;"> <input type="checkbox" name="item" value="1"> <textarea name="note" style="flex: 1; height: 24px; padding: 2px 4px; font-size: 14px;"></textarea> </td>
移动端点击区域小、文字输入体验差的修复点
复选框本身点击热区只有 ~18×18px，textarea 若太窄，用户很难精准聚焦。这不是“样式美化问题”，而是交互可用性缺陷。
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 务必把
<input type="checkbox">包进<label></label>，并用for或id关联，扩大可点区域 -
textarea至少设min-height: 24px，避免 iOS 上因过矮导致光标错位 - 禁用
resize: none可防用户意外拖拽改变尺寸，但要确保宽度足够容纳常用输入长度 - 不要依赖
placeholder替代标签说明——屏幕阅读器可能忽略它，且输入后就消失
提交时 textarea 值为空却仍被提交的陷阱
即使 textarea 可见为空，只要 DOM 存在且有 name 属性，表单提交时就会发送一个空字符串（note=）。后端若没做空值过滤，可能写入脏数据。
- 前端可加
required属性，但注意：空格、换行符会被认为“非空”，需额外 trim 校验 - 更稳妥的做法是在 JS 提交前检查：
if (!textarea.value.trim()) { textarea.name = ''; }，临时移除 name 避免提交 - 服务端必须校验该字段是否为有效非空白字符串，不能信任前端
required
表格里塞文本域不是难事，难的是让复选框状态、文本输入、提交逻辑三者真正解耦又协同——别让一个 <td> 成为 bug 温床。</td>
