HTML <textarea>标签（文本域）

在使用表单时，例如姓名、年龄字段我们可以使用单行文本框，但是当涉及到描述信息，内容比较多时，单行文本框很有可能放不下所有的内容，这时就需要用到多行文本框。

在 HTML 中，使用 <textarea> 标签来表示多行文本框，又叫做文本域。与其它 <input> 标签不同，<textarea> 标签是单闭合标签，它包含起始标签和结束标签，文本内容需要写在两个标签中间。具体语法格式如下：

接下来我们通过一段简单的代码来看一下：

<form action="http://bbs.cdsy.xyz/member.php?mod=logging&action=register" method="post">
    描述信息：<textarea name="description">此处是描述信息</textarea>
</form>

运行效果如图所示：

图1：HTML 文本域

通过运行结果可以发现，文本域的右下角有一个收缩按钮，拖拽按钮可以手动改变文本域的宽高。这个按钮默认显示，也可以隐藏，我们来看一下怎么隐藏它呢？

<form action="http://bbs.cdsy.xyz/member.php?mod=logging&action=register" method="post">
    描述信息：<textarea name="description" style="resize:none;">此处是描述信息</textarea>
</form>

注意：此处用到的是 CSS 样式中的内容，读者只需了解即可。当收缩按钮隐藏后，不能手动调节文本域的宽高。

同所有表单元素相同，文本域要想正确提交，也必须设置 name 属性。除了 name 属性以外，文本域还有其它属性，接下来我们看一下：

1. cols属性

cols 属性用来指定每行可以显示的字符数，也就是文本域的可见宽度。一般情况下，如果内容超出文本域宽度，会自动换行显示，但是如果文本内容较长，而且在大于文本域宽度时，还没有空格可以进行换行，就会出现横向滚动条。

我们来看一个示例：

<form action="http://bbs.cdsy.xyz/member.php?mod=logging&action=register" method="post">
  HTML教程描述：<textarea name="description" cols="40">这套「HTML教程」可以帮助读者快速入门，其中包含了作者大量的实践经验，将知识系统化，浓缩为精华，用通俗易懂的语言直指网页设计初学者的痛点。</textarea>
</form>

运行结果如图所示：

图2：设置了宽度的文本域

2. rows属性

在文本域中，rows 属性用来设置文本域的可见行数，也就是文本域的高度。当文本内容超出设置高度时，会出现纵向滚动条。用户拖动滚动条可以查看全部内容。

示例如下：

<form action="http://bbs.cdsy.xyz/member.php?mod=logging&action=register" method="post">
  HTML教程描述：<textarea name="description" cols="40" rows="6">这套「HTML教程」可以帮助读者快速入门，其中包含了作者大量的实践经验，将知识系统化，浓缩为精华，用通俗易懂的语言直指网页设计初学者的痛点。</textarea>
</form>

运行结果如图所示：

图3：设置了高度的文本域

3. id属性

id 属性用来定义文本域的唯一 id 值。为文本域添加 id 属性，主要有以下 2 个方面：

• 在 css 中，可以使用 id 获取元素为其添加 css 样式；
• 在 JavaScript 中，可以根据设置好的 id 属性获取文本域，然后对它进行一系列操作，例如操作文本域的内容。