HTML表单元素textarea多行文本输入详解-html教程-PHP中文网

textarea是html原生多行文本控件，直接写即可支持换行、滚动、光标定位及select()全选，其value属性天然包含\n；不可用input type="text"替代，因后者为单行控件，不支持换行、无\n、软键盘无换行键，且表单序列化时会丢失换行符。

html表单元素textarea多行文本输入详解

textarea 不是“加”出来的功能，它本身就是 HTML 原生的多行文本控件——不用 JS 模拟、不靠 div + contenteditable 伪装，直接写 <textarea></textarea> 就能支持换行、滚动、光标定位、select() 全选，且 DOM 的 value 属性天然包含 \n。

为什么不能用 `input type="text"` 替代 `textarea`

根本原因在于语义和行为完全不同：

input type="text" 是单行控件，按 Enter 键不会换行，而是可能提交表单或触发默认行为；textarea 按 Enter 直接插入 \n，且保留所有换行与空白
移动端软键盘上，input 显示“搜索”“前往”等操作键，textarea 默认显示“换行”按钮，体验断层明显
表单序列化时，input 的值中所有换行都会被忽略或转为空格；textarea 的 value 中 \n 或 \r\n 会被原样提交到服务端
input 没有 rows/cols，也不支持内容预设（即不能在标签内写默认文本）

`name` 属性缺失会导致数据完全丢失

这是最常被忽略却最致命的问题：没有 name，textarea 的内容就无法随表单提交。

html-to-pptx

将多页 HTML 演示文稿转换为美化的 PPTX 文件，便于分享和分发。

下载

服务端接收不到任何字段，不是空字符串，是压根没这个 key
name 必须是合法的标识符（避免空格、特殊符号），且同一表单中不能重复
如果用 JS 动态取值（如 el.value），name 不影响读取，但表单原生提交、FormData 构造、后端框架自动绑定都依赖它
常见错误：<textarea id="comment"></textarea> —— 有 id 没 name，提交时该字段静默消失

尺寸控制别再用 `rows` 和 `cols`

rows 和 cols 是遗留属性，仅提供粗略视觉参考，实际渲染受字体、缩放、DPI 影响极大，且无法响应式。

CSS 的 width/height 或 min-height 更可控；推荐用 min-height: 100px + resize: vertical 平衡可用性与布局稳定
填满表格单元格时，必须加 display: block + box-sizing: border-box + width: 100%，否则 padding 和 border 会撑破 <td> <li>想让高度随内容自适应？监听 <code>input 事件，把 height 设为 auto 后立即设回 scrollHeight，但注意 iOS Safari 的 scrollHeight 计算偏差
禁用拖拽调整大小？用 resize: none，但别全局禁用——部分用户依赖垂直拉伸查看长文本

换行符处理和服务端接收是隐性雷区

前端敲出来的 \n 到后端不一定是你想要的 \n。

Windows 用户输入可能带 \r\n，Mac/Linux 是 \n；服务端收到后若未统一规范化（如全部转 \n），后续展示、统计、导出都可能错位
某些后端框架（如 Django 表单、Express 的 body-parser 默认配置）会自动 trim 或 strip 控制字符，导致首尾换行丢失
用 white-space: pre-line 渲染服务端返回的文本时，才能正确将 \n 转为换行；用 innerText 赋值会吞掉换行，得用 textContent 或手动
```
.replace(/\n/g, '<br>')
```
maxlength 限制的是 UTF-16 码元数，不是字数——中文、emoji 可能占 2 个码元，超出时截断位置可能在 emoji 中间