textarea是独立双标签元素，直接写即为最简稳兼容的多行文本结构；input type="text"无法替代，因其不支持换行、无\n字符、不触发换行软键盘，且表单序列化行为完全不同。
textarea 不是“加”出来的，它是独立的双标签元素，不能嵌套在 input 里，也不能用 div + JS 模拟替代——直接写 <textarea></textarea> 就是最简、最稳、最兼容的多行文本结构。
为什么不能用 input type="text" 替代 textarea
因为 input type="text" 是单行控件，按 Enter 不会换行，提交时也压根不带换行符；而 textarea 原生支持回车换行、滚动、光标定位、全选（select()）、以及 DOM 的 value 属性天然包含 \n 字符。浏览器对两者的表单序列化行为完全不同。
-
input提交后，所有换行操作都会被忽略或转为空格 -
textarea中的\n、\r\n会被原样保留在value中（服务端收到的就是带换行的字符串） - 移动端软键盘上，
textarea默认显示“换行”按钮，input显示“搜索”或“前往”，体验断裂
rows 和 cols 必须设吗？设多少才合理
不是必须，但不设等于把渲染交给浏览器猜：Chrome 默认 rows="2" cols="20"，Safari 可能更窄，移动端常缩成一条细缝。视觉失控只是表象，真正问题是用户第一眼没意识到这是可输入长文本的区域。
-
rows控制可见行数（非最大行数），建议设为4～8，兼顾初始高度与折叠感 -
cols是“近似字符宽度”，受字体、缩放影响大，实际项目中基本被 CSS 的width或min-width覆盖，可设cols="50"作降级兜底 - 若用 CSS 控制尺寸，
rows仍建议保留（比如rows="5"），否则某些旧版屏幕阅读器可能无法正确播报控件尺寸
placeholder 为啥不显示？常见失效原因
placeholder 在 textarea 里表现比 input 更脆弱，尤其当标签间有空格或换行时会静默失效：
- 错误写法：
<textarea placeholder="留言"></textarea>—— 开始标签和结束标签之间有空格或回车，导致 placeholder 被压制 - 正确写法：
<textarea placeholder="留言"></textarea>（零空白）或<textarea placeholder="留言">默认内容</textarea> - CSS 中若设置了
font-size: 0或line-height: 0，也会让 placeholder 文字不可见 - IE10/11 下 placeholder 不支持动态设置，只能初始化时写死在 HTML 里
怎么禁用拖拽调整大小又不影响可访问性
浏览器默认允许用户拖 textarea 右下角缩放，这在响应式布局里常引发错位。禁用要用 resize: none，但别一刀切：
- 仅对
textarea单独设：textarea { resize: none; }，避免影响其他可缩放元素（如iframe） - 若需保留纵向拉伸（让用户展开看全文），可用
resize: vertical - 完全禁用后，务必通过
min-height或height给足初始空间，否则小屏设备上用户可能误以为输不了几行 - 无障碍方面，
resize: none不影响屏幕阅读器读取，但得确保aria-label或关联的<label></label>存在，否则语义丢失
真正容易被忽略的是：哪怕你用 CSS 把 textarea 宽高锁死、placeholder 写对、rows cols 都设了，只要没配 name 属性，表单提交时它的值就根本不会发到后端——这个属性不是可选的，是参与表单数据序列化的唯一凭据。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
