HTML中的textarea标签是用于创建多行文本输入框的表单元素，它允许用户输入多行文本内容，比如留言、评论、长文本描述等场景都会用到这个标签。和单行的input标签不同，textarea可以自适应展示多行内容，也支持用户手动调整输入区域的大小。
textarea标签基础语法
textarea属于双标签，必须有开始标签和结束标签，标签之间的内容会作为输入框的默认初始文本。基础语法结构如下：
<textarea> 这里是默认的初始文本内容 </textarea>
需要注意的是，<textarea>的开始标签和结束标签之间不要随意添加多余的空格或换行，不然这些内容会被当作默认文本显示在输入框中。
常用核心属性
textarea标签支持多个属性来配置输入框的行为和样式，以下是开发中最常用的几个属性：
- rows：设置输入框默认显示的行数，值为数字，比如rows="5"表示默认显示5行文本高度。
- cols：设置输入框默认显示的列数，值为数字，代表每行可显示的字符数，比如cols="30"表示每行显示30个字符宽度。
- name：输入框的名称，用于表单提交时标识这个字段，后端可以通过这个名称获取输入的内容。
- placeholder：占位提示文本，当输入框没有内容时显示，提示用户应该输入什么内容。
- maxlength：限制用户输入的最大字符数，超过这个长度就无法继续输入。
- required：布尔属性，添加后表示这个输入框是必填项，表单提交时如果为空会触发浏览器的校验提示。
- readonly：布尔属性，添加后输入框内容不可编辑，但可以被选中复制。
- disabled：布尔属性，添加后输入框不可用，内容不可编辑也无法提交表单数据。
完整使用示例
下面是一个包含常见属性的textarea使用示例，模拟用户留言的场景：
<form action="/submit_message" method="post">
<h3>用户留言</h3>
<p>
<label for="user_message">请输入您的留言内容：</label>
</p>
<p>
<textarea
id="user_message"
name="message"
rows="6"
cols="40"
placeholder="请输入您的留言，最多不超过200字"
maxlength="200"
required
></textarea>
</p>
<p>
<button type="submit">提交留言</button>
</p>
</form>
在这个示例中，我们给textarea添加了id属性，和label标签的for属性对应，点击label文字时会自动聚焦到输入框。同时设置了必填、最大长度限制和占位提示，提升用户的使用体验。
和input标签的区别
很多开发者会混淆textarea和input标签的text类型，两者的核心区别如下：
| 对比项 | textarea标签 | input type="text" |
|---|---|---|
| 输入行数 | 支持多行输入，可显示多行内容 | 仅支持单行输入，内容过长会横向滚动 |
| 默认文本设置 | 放在开始和结束标签之间 | 通过value属性设置 |
| 大小调整 | 默认支持用户手动拖拽调整大小，可通过CSS禁止 | 大小固定，不支持手动调整 |
| 适用场景 | 长文本输入，如留言、评论、简介等 | 短文本输入，如用户名、手机号、验证码等 |
注意事项
使用textarea标签时需要注意以下几点：
- 不要在<textarea>和</textarea>之间写HTML标签，这些内容都会被当作纯文本显示，不会被浏览器解析。
- 如果要禁止用户调整textarea的大小，可以通过CSS设置
resize: none;样式。 - 获取textarea的输入内容时，通过元素的value属性获取，和input标签一致，比如用JavaScript获取：
document.getElementById("user_message").value。 - 表单提交时，textarea的内容会按照name属性的值作为键名，输入内容作为键值传递给后端。