HTML中如何创建多行文本输入框textarea-html教程-PHP中文网

textarea是html中用于创建多行文本输入框的双标签元素，基本写法为默认内容，name为必需属性以确保表单提交，rows和cols建议设置以避免浏览器默认渲染异常。

html中如何创建多行文本输入框textarea

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></textarea> 不自动撑高，用户输入超出 rows 后会出滚动条；而设固定 height 又容易截断或留白。真需求其实是“随文字增长适度扩展”，得靠 JS 配合 scrollHeight 动态调整。

核心逻辑：监听 input 事件，把 textarea.style.height = 'auto' 再设为 textarea.scrollHeight + 'px'，否则 height 会卡在旧值。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

简易实现片段：

const el = document.querySelector('textarea');
el.addEventListener('input', () => {
  el.style.height = 'auto';
  el.style.height = el.scrollHeight + 'px';
});

必须先设 'auto' 再设具体像素，否则 scrollHeight 不更新
建议加 min-height 和 max-height CSS 限制极端情况（如粘贴万字）
移动端注意 scrollHeight 在 iOS Safari 旧版本可能不准，可加 el.offsetHeight 回退判断

textarea 的 placeholder、禁用与只读行为差异

placeholder 在 <textarea></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