9.3 文本域

来源：网络作者：站长

在HTML表单中，文本域<textarea>元素用于多行文字，比如产品描述、评论、留言等等。杨青青个人博客上的评论就用了 <textarea>元素。<textarea> 元素定义多行的文本输入控件。

举例：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8">
        <title>表单</title>
    </head>
    <body>
        <form action="form_action.asp" method="get" name="myForm">
            个人简介：<textarea name="description">此处可输入多行内容</textarea>
        </form>
    </body>
</html>

运行浏览器后得到的效果如图

预览后我们发现文本域的默认尺寸非常小，在文本域的右下角有一个收缩按钮，拖拽按钮可以手动改变文本域的宽高。整体预览的效果离我们想象中还差很多，怎么去规定 <textarea> 的尺寸呢？可以通过 cols 和 rows 属性来规定 textarea 的尺寸。

举例：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8">
        <title>表单</title>
    </head>
    <body>
        <form action="form_action.asp" method="get" name="myForm">
            个人简介：<textarea name="description" rows="10" cols="40">此处可输入多行内容</textarea>
        </form>
    </body>
</html>

运行浏览器后得到的效果如图

写入rows和cols后，文本域就改变了默认的大小，后面我们就可以根据需要来调整。现在具体来看下<textarea> 标签的 cols 属性和 rows 属性。

1、<textarea> 标签的 cols 属性

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

举例：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8">
        <title>表单</title>
    </head>
    <body>
        <form action="form_action.asp" method="get" name="myForm">
            李白简介：<textarea name="description" cols="40">李白（701年－762年） ，字太白，号青莲居士，又号“谪仙人”，唐代伟大的浪漫主义诗人，被后人誉为“诗仙”，与杜甫并称为“李杜”，为了与另两位诗人李商隐与杜牧即“小李杜”区别，杜甫与李白又合称“大李杜”。</textarea>
        </form>
    </body>
</html>

运行浏览器后得到的效果如图

我们写上了cols 属性，和图一比较，文本域的默认宽度增加了。但是当前整个当文本域中的内容非常多，文本内容已经超出了文本域的宽度，并且文字自动换行了，在右边还出现了一个滚动条，说明我们这个文本域的高度是不够的，还需要调整它的高度，接下来我们来看<textarea> 标签的 rows 属性。

2、<textarea> 标签的 rows 属性

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

举例：

<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8">
        <title>表单</title>
    </head>
    <body>
        <form action="form_action.asp" method="get" name="myForm">
            李白简介：<textarea name="description" cols="40" rows="10">李白（701年－762年） ，字太白，号青莲居士，又号“谪仙人”，唐代伟大的浪漫主义诗人，被后人誉为“诗仙”，与杜甫并称为“李杜”，为了与另两位诗人李商隐与杜牧即“小李杜”区别，杜甫与李白又合称“大李杜”。</textarea>
        </form>
    </body>
</html>

运行浏览器后得到的效果如图