textarea不是input的多行变体，它有独立渲染逻辑、默认样式和提交行为；input[type="text"]强制单行，回车触发表单提交而非换行，且不保留换行符，而textarea原生支持换行、滚动、自适应高度及语义化无障碍访问。
文本域（<textarea>）不是 <input> 的多行变体，它有自己的渲染逻辑、默认样式和提交行为——直接套用 input 的习惯写法会出问题。
为什么不能用 input type="text" 替代 <textarea>
浏览器对 <input type="text"> 强制单行处理，即使加了 style="white-space: pre-wrap; height: 100px;"，用户按 Enter 也不会换行，而是触发表单提交（尤其在只有一个输入框时）。而 <textarea> 原生支持回车换行、光标定位、滚动条、自动调整高度（配合 CSS）等行为。
-
<input>的值始终是单行字符串，换行符会被忽略或转为空格 -
<textarea>的值保留所有换行符（\n或\r\n），服务端收到的是真实多行文本 - 无障碍支持上，
<textarea>自带可读性语义，屏幕阅读器能正确播报“多行编辑区域”
<textarea> 的 rows 和 cols 是什么作用
rows 和 cols 不是 CSS 尺寸控制，而是**渲染提示值**：告诉浏览器“建议显示几行、每行大概多少字符宽”。它们不影响实际内容长度限制，也不响应视口缩放。
-
rows="4"≈ 显示约 4 行高（基于字体行高），但用户仍可拖拽拉伸或滚动查看更多 -
cols="50"≈ 每行最多显示约 50 个 ASCII 字符宽度（中文通常按 2 字符宽估算） - 若同时设了
style="width: 100%; height: 120px;"，cols会被忽略；rows只在无显式height时起参考作用 - 真正限制输入长度要用
maxlength属性（注意：它按 Unicode 码点计数，含换行符）
常见错误：空值、换行、placeholder 和默认内容混用
<textarea> 的“占位提示”必须写在开始与结束标签之间，不能靠 value 或 placeholder（后者虽被部分浏览器支持，但不规范且不可选中）。
立即学习“前端免费学习笔记（深入）”；
- ❌ 错误写法：
<textarea placeholder="请输入反馈..." value="默认值"></textarea>——value属性在<textarea>上无效，内容必须写在标签体内 - ✅ 正确写法：
<textarea name="feedback">默认已填写的内容</textarea> - 换行符要小心：HTML 中换行会被解析为一个空格，所以写成
<textarea>第一行↵第二行</textarea>实际值是"第一行 第二行"（中间一个空格）。需写成<textarea>第一行</textarea><textarea>第二行</textarea>？不对——应直接写<textarea>第一行\n第二行</textarea>，但 HTML 源码里得用实体或 JS 注入 - 更稳妥的做法：初始内容由 JS 设置
el.value = "第一行\n第二行"，或后端渲染时确保换行符保留
服务端接收时要注意的换行格式差异
用户在 Windows、macOS、Linux 上按 Enter，分别产生 \r\n、\n、\n。PHP/Node.js/Python 默认不会统一归一化，可能导致数据库存储不一致或前端渲染异常（比如 \r\n 在某些 Markdown 解析器中被当作文本换行，而 \n 被忽略）。
- 提交前可在 JS 中 normalize：
value.replace(/\r\n|\r|\n/g, '\n') - 后端入库前建议统一转为
\n，避免条件判断时漏掉\r - 若用于预填充编辑（如 CMS 后台），需原样保留换行符，否则用户二次编辑会丢失格式
最易被忽略的一点：CSS 的 resize 属性默认开启，用户能拖拽改变 <textarea> 大小，但很多设计稿没考虑这个交互。如果 UI 要求固定尺寸，记得加 resize: none;；如果允许拉伸，就别设死 height，否则滚动条可能被遮挡或失效。
