textarea是HTML中用于创建多行文本输入框的双标签元素，基本写法为<textarea name="xxx">默认内容</textarea>，name为必需属性以确保表单提交，rows和cols建议设置以避免浏览器默认渲染异常。
textarea 元素的基本写法和必需属性
HTML 中创建多行文本输入框，必须用 <textarea> 标签，它不是自闭合标签，得有明确的结束标签 </textarea>。最简可用形式只需指定 name 属性（表单提交时用）和内容占位（可选），但实际项目中漏掉 rows 和 cols 会导致渲染不可控——浏览器默认只显示约 2 行、20 字符宽，视觉上像被压缩过。
推荐写法示例：
<textarea name="comment" rows="4" cols="50">请输入反馈...</textarea>
-
rows控制可见行数（非字符限制），值为数字，不带单位 -
cols控制可见平均字符宽度，受字体影响，仅作布局参考 - 内容文本写在开始与结束标签之间，不是通过
value属性设置（<input>才用value） - 若省略
name，该字段不会随表单提交，后端收不到
如何让 textarea 自适应内容高度（避免滚动条或空白）
原生 <textarea> 不自动撑高，用户输入超出 rows 后会出滚动条；而设固定 height 又容易截断或留白。真需求其实是“随文字增长适度扩展”，得靠 JS 配合 scrollHeight 动态调整。
核心逻辑：监听 input 事件，把 textarea.style.height = 'auto' 再设为 textarea.scrollHeight + 'px'，否则 height 会卡在旧值。
立即学习“前端免费学习笔记（深入）”；
简易实现片段：
const el = document.querySelector('textarea');
el.addEventListener('input', () => {
el.style.height = 'auto';
el.style.height = el.scrollHeight + 'px';
});
- 必须先设
'auto'再设具体像素，否则scrollHeight不更新 - 建议加
min-height和max-heightCSS 限制极端情况（如粘贴万字） - 移动端注意
scrollHeight在 iOS Safari 旧版本可能不准，可加el.offsetHeight回退判断
textarea 的 placeholder、禁用与只读行为差异
placeholder 在 <textarea> 中支持良好，但它的文字是灰色浅色、无换行（会折叠成一行显示），且一旦聚焦就消失——这点和 <input> 一致。但 disabled 和 readonly 的表现有关键区别：
-
disabled：完全不可交互，提交时字段被忽略（后端收不到），文字变灰，键盘焦点无法进入 -
readonly：内容不可编辑，但可聚焦、可复制、可提交（后端能收到值） - 两者都让
placeholder不显示（因为 placeholder 是为“可输入”状态设计的） - 若想禁用但保留样式，别用
disabled直接加pointer-events: none，否则屏幕阅读器可能误判
常见错误：CSS 覆盖导致 textarea 失效或变形
很多团队全局重置 box-sizing 或给 textarea 加 resize: none 后忘了配 min-height，结果用户输几行就溢出或撑破容器。更隐蔽的问题是：设置了 width: 100% 却没处理 border 和 padding，造成横向滚动条或内容被截。
- 务必用
box-sizing: border-box（现代项目基本都设了，但检查下） - 避免对
textarea直接设height，除非你确定要固定高度+滚动条 -
resize默认是both，用户可拖拽右下角缩放；设为vertical更友好，禁止水平拉伸防布局崩坏 - Chrome/Firefox 对
textarea的line-height渲染略有差异，若行高异常，优先调padding而非依赖line-height
textarea 看似简单，但跟表单验证联动、无障碍支持（比如 aria-label 或关联 <label>）、以及富文本降级方案这些环节，最容易在迭代中被跳过。别只盯着能不能输多行。 
