必须用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，而是对行为理解偏差：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• 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），统一处理前别直接入库或渲染。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！