HTML文本域TextArea怎么用 HTML多行文本域输入教程
在网页表单中，简单的单行输入框（<input>）只能满足姓名、邮箱这类短文本的需求。当用户需要输入一段评论、留言或者个人简介时，就需要用到多行文本输入控件——<textarea>。它为我们提供了一个可以自由换行、滚动查看的大面积输入区域。
一、TextArea 的基本结构
与 <input> 不同，<textarea> 是一个闭合标签，它的内容写在开始标签和结束标签之间。最基础的写法只需要两个属性：
<textarea rows="5" cols="30">请在这里输入...</textarea>
- rows：定义文本域的可见行数（高度）。
- cols：定义文本域的可见宽度（字符数）。
上述代码会渲染出一个大约 5 行高、30 个英文字符宽的输入框，中间会显示预设文字“请在这里输入...”。
二、常用属性详解
除了尺寸，<textarea> 还支持很多实用的属性，帮助约束用户输入和改善体验。
1. name 属性
表单提交时，<textarea> 的值依赖 name 属性作为键名发送给服务器。如果没有 name，数据将不会被提交。
<textarea name="comment" rows="4" cols="50"></textarea>
2. placeholder 占位提示
与 <input> 类似，可以使用 placeholder 设置灰显的提示文字，当用户开始输入时文字自动消失。
<textarea placeholder="请分享你的想法..." rows="4" cols="50"></textarea>
3. maxlength 最大字符数
限制用户最多可输入的字符数量，浏览器会阻止超出部分。
<textarea maxlength="200" rows="3" cols="40"></textarea>
4. readonly 和 disabled
- readonly：内容只读，用户无法编辑，但数据仍会随表单提交。
- disabled：禁用整个控件，内容变灰不可编辑，且不会被提交。
<textarea readonly rows="4" cols="30">这段内容不可修改</textarea> <textarea disabled rows="4" cols="30">已禁用的文本域</textarea>
5. required 必填项
如果表单提交时文本域为空，浏览器会阻止提交并给出提示。需要配合 <form> 使用。
<textarea required rows="4" cols="30"></textarea>
三、设置默认内容
<textarea> 的默认值直接写在标签内部，而不是通过 value 属性。如果需要展示一个编辑前的原始内容，把文本放在开始标签和结束标签之间即可。
<textarea rows="6" cols="40"> 这里是一段预设的示例文字， 可以包含换行。 </textarea>
注意：内容前后的换行和缩进都可能被当作默认文本的一部分，所以如果不想出现多余空白，请紧贴标签书写。
四、美化文本域的外观
默认的 <textarea> 外观比较简陋，而且右下角通常会有一个可拖拽改变大小的手柄。通过 CSS 可以对它进行灵活定制。
1. 设置宽度和高度
使用 width 和 height 比单纯的 cols/rows 更灵活，可以指定百分比或精确像素值。
textarea {
width: 100%;
height: 150px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-family: inherit;
font-size: 14px;
box-sizing: border-box; /* 包含内边距和边框在宽高内 */
}2. 禁止手动调整尺寸
如果不希望用户拖拽右下角改变大小，可以设置 resize: none;。
textarea {
resize: none; /* 禁止调整大小 */
}也可以只允许水平或垂直方向调整：resize: vertical; 或 resize: horizontal;。
3. 聚焦状态高亮
用 :focus 伪类增强交互反馈。
textarea:focus {
outline: none;
border-color: #4A90E2;
box-shadow: 0 0 5px rgba(74,144,226,0.5);
}五、表单提交实战
一个完整的留言表单通常会这样组合：
<form action="/submit" method="post"> <label for="message">您的留言：</label> <textarea id="message" name="message" rows="5" cols="40" placeholder="请输入内容"></textarea> <button type="submit">提交</button> </form>
用户点击提交时，name="message" 对应的值会以 message=用户输入的内容 的形式发送到服务器端。
六、用 JavaScript 动态操作
通过 JavaScript 可以方便地读取和设置 <textarea> 的内容，也能监听输入变化做字数统计等实时反馈。
1. 获取和设置值
使用 .value 属性读写内容，而不是 innerText。
// 获取 textarea 元素
var textArea = document.getElementById('comment');
// 读取当前值
console.log(textArea.value);
// 设置新值
textArea.value = '新的内容';2. 监听输入事件
实现一个简单的字数统计：
<textarea id="bio" rows="3" cols="40" placeholder="介绍一下自己"></textarea>
<p>已输入 <span id="counter">0</span> 字</p>
<script>
var textarea = document.getElementById('bio');
var counter = document.getElementById('counter');
textarea.addEventListener('input', function() {
counter.textContent = this.value.length;
});
</script>3. 自动调整高度
有时希望文本域根据内容自动增高，可以通过监听输入并重置高度来实现：
textarea.addEventListener('input', function() {
this.style.height = 'auto'; // 先恢复默认高度
this.style.height = this.scrollHeight + 'px';
});别忘了在 CSS 中设置 overflow: hidden; 防止滚动条干扰计算。
七、常见使用场景
- 用户留言 / 评论框：最常见的用途，让用户输入大段文字。
- 个人简介 / 备注：注册或编辑资料时填写多行信息。
- 代码编辑器：配合等宽字体，可模拟简单的代码输入区。
- 邮件正文：在网页邮件客户端中编写邮件内容。
八、与 contenteditable 的区别
HTML 中还有一种多行编辑的方式，就是给普通元素（如 <div>）添加 contenteditable="true" 属性。它可以让用户直接编辑元素内的富文本，但数据提取和表单提交不如 <textarea> 方便。对于纯文本的多行输入，<textarea> 是更简单可靠的选择。
九、总结
<textarea> 是构建用户交互表单时不可或缺的元素。掌握它的常用属性、样式控制和 JavaScript 交互，可以轻松满足各类多行输入需求。实际开发中，建议结合 placeholder、maxlength 和良好的视觉引导，让用户清楚地知道该输入什么、能输入多少，从而提升表单的完成率和体验。