标签可直接创建多行文本框，原生支持换行、回车、滚动和长内容输入；基础写法中rows和cols非必须但建议显式设置，否则依赖浏览器默认值（通常rows="2"、cols="20"）易导致渲染不可控，尤其移动端；推荐优先使用css的width、height或min-height精确控制尺寸。
直接用 <textarea></textarea> 标签就能创建多行文本框，它原生支持换行、回车、滚动和长内容输入，不需要额外 JS 就能工作。
基础写法：必须设 rows 和 cols 吗？
不是必须，但建议显式设置。不设时浏览器会用默认值（通常是 rows="2"、cols="20"），渲染不可控，尤其在移动端容易过窄或过矮。
-
rows控制**可见行数**（不是字符数），影响初始高度 -
cols控制**可见字符宽度**（等宽字体下的近似列数），实际宽度仍受 CSS 影响 - 更推荐用 CSS 的
width和height或min-height精确控制尺寸 - 若只设
rows不设cols，可能在某些浏览器中出现横向溢出或自动折行异常
关键属性：哪些 HTML5 新增属性最实用？
这些属性能显著提升体验，且现代浏览器兼容性良好（Chrome 12+、Firefox 4+、Edge 13+、Safari 5.1+）：
-
placeholder="请输入反馈..."：输入前的提示文字，不占 value，用户开始输入即消失 -
maxlength="500"：硬性限制字符总数（含换行符 \n），避免后端校验失败 -
required：表单提交前强制非空，配合:valid/:invalid可做样式反馈 -
autofocus：页面加载后自动聚焦，适合主输入框，但慎用于弹窗或动态插入的<textarea></textarea> -
wrap="soft"（默认）或wrap="hard"：仅影响表单提交时换行符是否随值发送；hard会在提交值中插入\r\n，一般不用
常见错误：为什么回车没反应 / 换行不显示 / 提交内容被截断？
这些问题通常不是 bug，而是属性或服务端处理没对齐：
- 回车没反应 → 检查是否误加了
disabled或readonly；或者父容器有pointer-events: none - 换行在页面上不显示 → 渲染时 HTML 默认忽略连续空白（包括 \n），需 CSS 加
white-space: pre-wrap才能保留换行和空格 - 提交内容比预期少 → 后端读取时用了
request.Form["name"].Trim()类逻辑，但没处理 \r\n；或前端设置了maxlength却没同步到服务端校验 - 移动端软键盘不弹出 → 缺少
autofocus且未在用户交互后调用textarea.focus()；iOS Safari 对非用户手势触发的 focus 有严格限制
CSS 与交互：如何让 <textarea></textarea> 更可控？
原生 <textarea></textarea> 的尺寸和行为容易失控，靠 CSS 补齐很关键：
- 用
resize: vertical禁止横向拖拽，避免布局崩坏 - 设
min-height: 100px+height: auto（配合 JS 动态调整）可实现“随内容自适应高度”，但注意：纯 CSS 无此能力，需 JS 监听input事件并重设scrollHeight - 如果要限制最大高度并启用滚动，用
max-height: 200px; overflow-y: auto;，同时确保box-sizing: border-box - 禁用系统默认 outline：加
outline: none，但务必用:focus-visible或其他方式保留可访问性焦点样式
真正容易被忽略的是换行符一致性：前端 value 中的换行是 \n（Linux/macOS 风格），但 IE/Edge 曾返回 \r\n，服务端解析时最好统一 normalize 为 \n 再处理。
