HTML多行文本框与textarea标签使用详解
在网页开发中，输入框是最基础的交互组件之一。单行输入框适合收集简短信息，而多行文本输入则需要使用专门的<textarea>标签实现。本文将详细介绍<textarea>标签的作用、基础用法、常用属性以及实际开发中的注意事项。
一、textarea标签的核心作用
<textarea>是HTML中用于定义多行纯文本输入控件的标签，主要作用包括：
支持用户输入多行文本内容，比如评论、留言、文章编辑等场景
可以显示默认的多行文本内容，而不是空白输入框
属于表单元素，内容可以通过表单提交到后端服务器
支持用户手动调整尺寸（默认行为，可通过属性关闭）
二、textarea标签的基础用法
<textarea>是一个双标签，标签内部的内容会作为文本框的默认显示文本，基本语法如下：
<textarea> 这里是默认的文本内容，可以是多行 比如换行也会直接显示在文本框中 </textarea>
如果需要将<textarea>的内容提交到后端，需要将其放入<form>表单中，并指定name属性，示例：
<form action="https://www.ipipp.com/submit" method="post"> <label for="user-comment">请输入你的评论：</label> <textarea id="user-comment" name="comment"></textarea> <button type="submit">提交评论</button> </form>
三、textarea常用属性
<textarea>支持多个属性来控制其显示和行为，以下是开发中最常用的属性：
| 属性名 | 作用说明 | 示例 |
|---|---|---|
| rows | 设置文本框的可见行数，即高度 | rows="5" 表示显示5行文本的高度 |
| cols | 设置文本框的可见列数，即宽度（每个英文宽度为1列） | cols="30" 表示宽度为30个英文字符 |
| name | 定义文本框的名称，用于表单提交时标识数据字段 | name="user_content" |
| id | 定义文本框的唯一标识，用于关联<label>标签或JS操作 | id="content-input" |
| placeholder | 设置提示文本，当用户未输入内容时显示，输入后消失 | placeholder="请输入你的留言内容..." |
| readonly | 设置文本框为只读状态，用户无法修改内容，但内容可以提交 | readonly |
| disabled | 设置文本框为禁用状态，用户无法修改，内容也不会提交 | disabled |
| maxlength | 限制用户输入的最大字符数 | maxlength="200" 最多输入200个字符 |
| required | 设置文本框为必填项，表单提交时如果为空会提示错误 | required |
四、实战示例：带校验的留言板文本框
下面是一个结合实际场景的示例，实现一个带提示、长度限制、必填校验的多行留言文本框：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>留言板示例</title> </head> <body> <form action="https://www.ipipp.com/message/save" method="post"> <h3>用户留言</h3> <p> <label for="message">留言内容（最多300字）：</label> </p> <textarea id="message" name="message_content" rows="8" cols="50" placeholder="请在这里输入你的留言..." maxlength="300" required ></textarea> <p> <button type="submit">提交留言</button> </p> </form> </body> </html>
五、使用注意事项
<textarea>的默认文本内容写在开始标签和结束标签之间，不要在标签内用
value属性设置默认值，这是和<input>标签的区别之一。如果使用CSS控制<textarea>的尺寸，建议使用
width和height属性，同时可以通过resize属性控制是否允许用户调整尺寸：resize: none禁止调整，resize: vertical只允许垂直调整，resize: horizontal只允许水平调整。禁用状态下的<textarea>内容不会随表单提交，如果需要只读又能提交，应该使用
readonly属性而不是disabled。可以通过JavaScript获取<textarea>的内容，示例：
const content = document.getElementById('message').value;，也可以通过document.getElementById('message').value = '新内容'设置文本框内容。
六、JavaScript操作textarea示例
实际开发中经常需要通过JS动态获取或设置<textarea>的内容，以下是简单示例：
// 获取id为message的textarea元素
const textareaEle = document.getElementById('message');
// 获取文本框当前内容
const currentContent = textareaEle.value;
console.log('当前输入内容：', currentContent);
// 设置文本框内容
textareaEle.value = '这是通过JS设置的新内容';
// 监听输入事件，实时统计字符数
textareaEle.addEventListener('input', function() {
const charCount = this.value.length;
console.log('已输入字符数：', charCount);
});通过上述介绍，相信你已经掌握了<textarea>标签的核心用法，在实际开发中可以灵活结合属性和JS操作，满足不同的多行文本输入需求。