必须用textarea，input type="text"是单行控件，无法支持换行、自动折行或滚动查看长内容；textarea原生支持回车换行、\n保留、光标定位及表单序列化，是唯一符合标准的多行输入方案。
必须用 textarea，input type="text" 无论如何都做不到多行
想让输入框支持换行、自动折行、滚动查看长内容？别试 input type="text" 了。它在 HTML 规范里就是单行控件，哪怕你加 white-space: pre-wrap、height: 100px 或者 rows 属性，浏览器也只会忽略或显示异常字符（比如 □ 或 ）。真正能原生支持多行编辑的，只有 textarea。
textarea 的最小可用写法和必填属性
一个能提交数据的 textarea 至少要带 name 属性，否则表单提交时后端收不到值。其他属性按需添加：
-
name：必须，服务器靠它识别字段，例如name="comment" -
id：推荐，用于绑定label或 JS 操作，如id="comment-input" -
rows：设置初始可见行数（不是最大行数），如rows="4"；cols已基本被 CSS 替代，可不写 - 内容默认值直接写在标签体内：
<textarea name="msg">默认文字</textarea>
常见错误：placeholder 不显示、换行不生效、提交后丢失回车
这些不是 bug，而是对行为理解偏差：
- placeholder 不显示？检查是否写了
value属性——textarea的默认值必须写在开始与结束标签之间，不能用value="xxx" - 用户按 Enter 没反应？那是错觉，
textarea天然支持回车换行，但换行符是\n，不是<br>
；渲染时不会自动转成 HTML 换行，需后端或 JS 处理 - 表单提交后换行消失？确认后端接收时没做
trim()或strip_tags()类操作，尤其注意 PHP 的filter_var($str, FILTER_SANITIZE_STRING)会删掉 \n - 设置了
maxlength="200"却还能输超？因为部分浏览器对textarea的maxlength支持较晚（IE10+、Chrome 54+），老版本需 JS 补充校验
CSS 控制尺寸和用户体验的关键点
用 rows 只能粗略控制高度，真正可控且响应式的方式是 CSS：
立即学习“前端免费学习笔记（深入）”；
- 用
width/max-width和min-height/height替代cols和死板的rows - 启用拖拽调整大小：
resize: vertical（只允许上下拉）或resize: both（推荐） - 禁用拖拽：
resize: none，但需同步提供足够初始高度，否则用户看不到全部内容 - 换行策略：
word-break: break-word防止超长英文单词撑破容器；overflow-y: auto确保内容超出时出现滚动条
最易被忽略的是：服务端接收到的换行符可能是 \r\n（Windows）、\n（Unix/macOS）或 \r（旧 Mac），统一处理前别直接入库或渲染。
