textarea是唯一标准、语义正确且可提交的多行文本输入方式；input所有type均只支持单行，无法换行，不参与表单序列化，div+contenteditable也不具备表单提交能力。
textarea 是唯一标准、语义正确且可提交的多行文本输入方式。别试图用 input 加 CSS 模拟，也别用 div + contenteditable 替代——它们不参与表单序列化，服务端收不到数据。
为什么不能用 input 标签实现多行？
input 的所有 type 值（包括 text、search、email 等）都只支持单行输入。即使强行用 CSS 设置 white-space: pre-wrap 或 height，用户按 Enter 也不会换行，而是触发表单提交或无响应。
常见错误现象：
- 用户敲回车后整个表单意外提交
- 输入内容被截断或无法换行显示
- 移动端软键盘回车键行为异常（如直接收起键盘）
textarea 必须设置的属性有哪些？
仅写 <textarea></textarea> 能渲染，但实际项目中会立刻出问题：
-
name属性缺失 → 表单提交时该字段完全不会出现在FormData或 URL 查询参数中 - 没配
label→ 无障碍访问失败，屏幕阅读器无法关联提示文字 - 没设
rows或 CSSheight→ 浏览器默认只显示 2 行，用户体验压抑 - 依赖前端
maxlength→ 无法防绕过（如禁用 JS 后粘贴超长文本），必须后端再校验
最小可用示例：
<label for="desc">描述</label> <textarea name="description" id="desc" rows="4" maxlength="500"></textarea>
如何控制大小和缩放行为？
rows 和 cols 是 HTML 属性，仅定义初始可见行数/列数，不控制最终尺寸；真正可靠的是 CSS：
- 用
min-height/max-height配合resize: vertical，允许用户拉伸高度但禁止横向拉宽（避免布局错乱） - 避免设死
width: 100%后又加padding导致溢出，推荐用box-sizing: border-box - 移动端注意：iOS Safari 对
resize支持不稳定，部分版本会忽略resize: none
推荐样式片段：
textarea {
width: 100%;
min-height: 100px;
max-height: 300px;
resize: vertical;
box-sizing: border-box;
}
容易被忽略的 XSS 和体验细节
用户在 textarea 里粘贴富文本（比如从 Word 复制带格式内容）时，可能混入不可见字符或恶意脚本片段：
- 前端可做基础过滤（如移除
<script></script>、onerror=等），但不能替代后端清洗 - 实时字数统计建议用
input事件监听，而非keyup（后者捕获不到粘贴、剪切等操作） - 不要用
placeholder替代label，占位符在聚焦后消失，不符合 WCAG 2.1 标准
最常漏掉的一点：服务端收到的换行符是 \n（Linux/macOS）还是 \r\n（Windows），取决于用户设备，统一处理前最好先 normalize。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
