应优先使用实现单行提交，因其天然支持单行、maxlength、pattern及原生校验；若必须用，需JS监听input事件实时清除换行符并禁用缩放。
表格本身不提交数据，<textarea></textarea> 默认是多行的，要实现“单行提交”得靠限制行为而非改变标签本质。
为什么 <textarea></textarea> 不能直接当单行输入框用
<textarea></textarea> 的设计目标就是支持换行和滚动，即使设 rows="1"，用户仍可用 Shift+Enter 换行，或粘贴带换行的内容。浏览器不会自动截断、也不触发 input 类型的原生验证（比如 maxlength 在部分旧版 Safari 中对 <textarea></textarea> 失效）。
常见错误现象：
– 表单提交后后端收到含 \n 的字符串，导致数据库字段错位或日志解析失败
– 用户输入超长内容却没被前端拦截，required 通过但实际内容无效
– 移动端软键盘弹出“换行”键，诱导用户误操作
实操建议：
• 优先改用 <input type="text">，它天然单行、支持 maxlength、pattern 和原生空值校验
• 若必须用 <textarea></textarea>（例如预留多行扩展性），加 JS 监听 input 事件，用 .replace(/\n/g, '') 实时清理换行符
• 同时设置 style="resize: none;" 防止用户拖拽扩大区域
立即学习“前端免费学习笔记（深入）”；
<table> 里嵌表单控件的常见布局陷阱
<p>表格不是语义化表单容器，<code><tr> 和 <code><td> 会干扰表单控件的默认盒模型和响应式行为。尤其在移动端，<code><textarea></textarea> 宽度容易被 td 的 width 或 min-width 锁死，无法自适应屏幕。
使用场景：
– 管理后台中“批量编辑”表格，每行末尾需一个单行备注输入框
– 数据看板中某列需支持快速文本标注
实操建议：
• 不要在 <td> 内直接写 <code><textarea></textarea>，而是包裹一层 <div style="width: 100%;">，再放控件<br>• 避免给 <code><table> 设 <code>table-layout: fixed，否则 <input> 的 width: 100% 可能失效
• 如果用 CSS Grid 替代 <table> 布局，控件宽度控制更可靠，且语义更清晰
<h3>单行提交时的 <code>form 提交行为控制
HTML 表单默认用 GET 提交时，<textarea></textarea> 内容若含空格或特殊字符，会被编码进 URL，可能触发长度截断（IE/Edge 旧版本限 2083 字符）；用 POST 则无此问题，但需确保后端能正确解析 application/x-www-form-urlencoded 格式。
参数差异：
• method="get"：URL 可书签、可缓存，但不安全，不适合敏感或长文本
• method="post"：无长度限制，但刷新页面会重复提交，需配合后端防重放机制
实操建议：
• 所有含文本输入的表单，method 显式设为 "post"
• 若需 URL 分享（如搜索），改用 <input type="search">，它语义明确且兼容性好
• 提交前用 JS 检查 value.trim().length === 0，比单纯依赖 required 更可靠
真正难处理的不是怎么让输入看起来像单行，而是怎么确保它「逻辑上就是单行」——包括粘贴、JS 注入、移动端软键盘行为、以及后端接收时的换行清洗。别省略服务端的 str.replace(/\s+/g, ' ').trim() 这一步，前端永远不可信。
