HTML textarea 多行文本框概述
在 Web 表单设计中，<textarea> 元素是收集用户长文本输入的核心组件。与单行的 <input type="text"> 不同，<textarea> 允许用户输入多行纯文本，常用于留言板、评论框、描述说明等场景。通过合理运用 HTML 属性和 CSS 样式，开发者可以精确控制文本框的尺寸、外观、交互行为，甚至实现自适应高度的动态效果。本文将系统梳理 <textarea> 的常用属性与样式调整方法，帮助你构建功能完善、视觉协调的多行文本输入区域。
基础 HTML 属性
<textarea> 标签本身不带 value 属性，其内容直接作为初始文本写在开闭标签之间。以下是最基础的用法：
<textarea rows="4" cols="50" placeholder="请输入您的建议..."></textarea>
常用属性一览：
- rows：设置可见行数，影响默认高度。
- cols：设置可见列数，影响默认宽度（但通常被 CSS 覆盖）。
- placeholder：占位提示文本，用户输入后自动消失。
- maxlength：限制最多可输入的字符数量（HTML5 新增）。
- readonly：只读状态，不可编辑。
- disabled：禁用状态，不可交互且表单提交时数据不会被发送。
- name：表单提交时的键名，必不可少。
一个结合了多种属性的实际示例：
<form action="/submit" method="post">
<label for="bio">个人简介（最多500字）：</label>
<textarea id="bio" name="bio" rows="6" cols="60"
placeholder="请简单介绍自己..."
maxlength="500" required></textarea>
<button type="submit">提交</button>
</form>HTML5 扩展属性
现代浏览器为 <textarea> 增加了更多控制选项：
- wrap：控制文本换行行为。可选值
soft（软换行，默认）或hard（硬换行，需配合 cols 属性，提交数据时会在换行处插入换行符）。 - autofocus：页面加载后自动聚焦。
- spellcheck：启用或禁用拼写检查，值为
true或false。
CSS 样式调整
默认的 <textarea> 外观往往与整体设计不协调，通过 CSS 可以精细定制。以下是一些关键样式要点。
1. 尺寸控制
最常用的方式是通过 width 和 height 属性直接设定文本框的宽高，这种方式优先级高于 rows 和 cols 属性。同时可以利用 resize 属性控制是否允许用户手动拖拽调整大小。
/* 固定尺寸，不允许用户拖拽调整 */
textarea {
width: 100%;
height: 150px;
resize: none; /* 可选值：none, vertical, horizontal, both */
}如果希望保持用户调整大小的权限，但限制方向，可以设为 vertical（仅垂直）或 horizontal（仅水平）。
2. 边框、背景与字体
通过调整边框、圆角、内边距和背景色，可以使文本框与页面风格统一。字体属性同样可以继承或独立设置。
textarea {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 6px;
background-color: #f9f9f9;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 1rem;
line-height: 1.5;
color: #333;
transition: border-color 0.3s ease;
}
textarea:focus {
outline: none;
border-color: #4A90E2;
box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.2);
}3. 滚动条美化
当内容超出文本区域时，浏览器会显示滚动条。可以使用 ::-webkit-scrollbar 等伪元素对 Webkit 内核浏览器进行自定义美化，但注意这并非标准 CSS 属性，在非 Webkit 浏览器中可能无效。
/* Webkit 浏览器滚动条样式 */
textarea::-webkit-scrollbar {
width: 8px;
}
textarea::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
textarea::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 10px;
}
textarea::-webkit-scrollbar-thumb:hover {
background: #a8a8a8;
}对于 Firefox 等浏览器，暂时只能使用 scrollbar-width 和 scrollbar-color 进行有限调整。
高级功能：自动调整高度
在某些场景下，我们希望文本域随着内容自动增高，避免出现内部滚动条。这可以通过 JavaScript 监听 input 事件动态调整元素高度来实现。核心思路是：将 textarea 的高度设为其 scrollHeight，同时将 overflow 设为 hidden。
// 获取 textarea 元素
const textarea = document.getElementById('auto-height');
textarea.addEventListener('input', function() {
// 重置高度，以便 scrollHeight 能正确计算
this.style.height = 'auto';
// 将高度设置为内容实际高度
this.style.height = this.scrollHeight + 'px';
});对应的 HTML 和基础样式：
<textarea id="auto-height"
placeholder="输入内容，文本域会随之增高..."></textarea>
<style>
#auto-height {
width: 100%;
padding: 12px;
border: 1px solid #ddd;
border-radius: 4px;
resize: none; /* 禁止手动拖拽，避免冲突 */
overflow: hidden; /* 隐藏滚动条，让高度随内容自动变化 */
font-size: 1rem;
line-height: 1.5;
transition: height 0.2s ease;
}
</style>这段代码会在每次输入时重新计算文本域的完整高度，实现平滑的自适应效果。如果要设置最小高度或最大高度，可以在每次赋值后判断 scrollHeight 的范围，或在 CSS 中用 min-height 和 max-height 进行限制。
响应式设计与移动端优化
在移动设备上，文本框的默认字号过小时可能引发 iOS Safari 的自动缩放问题，建议将字体大小设置为至少 16px。同时，可以使用媒体查询在不同断点调整文本域宽度或高度，确保良好的可操作性。
/* 移动端优先 */
textarea {
width: 100%;
font-size: 16px; /* 防止 iOS 缩放 */
box-sizing: border-box;
}
/* 中等屏幕以上可以适当增加高度 */
@media (min-width: 768px) {
textarea {
height: 200px;
}
}此外，确保 <textarea> 被适当包裹在表单元素中，并考虑为移动设备开启辅助输入属性，如 autocorrect 和 autocapitalize（这些可以通过 <input> 或 <textarea> 上的 autocorrect="off" 和 autocapitalize="none" 控制）。
总结
<textarea> 作为表单的重要成员，其配置自由度很高。从基础的 rows、cols 到 CSS 的全面装饰，再到 JavaScript 驱动的动态高度，开发者可以根据项目需求逐层深入优化。掌握这些属性与样式技巧，将帮助你构建既美观又易用的多行文本输入界面，提升用户体验。