节课，我们学习表单的多行文本框控件。

多行文本框控件，也称文本域控件。生活中多行文本框随处可见，例如：在线简历中的个人优势区域；在线问卷调查中的个人观点和看法区域；流调信息表中的详细地址，都使用到了多行文本输入框。

多行文本框相对于单行文本框而言，允许用户输入多行文本。文本触达右侧边界后会自动折行；文本超出底部边界后会产生滚动条，可以滚动鼠标滚轮查看完整的输入信息。

在HTML中如何实现多行文本框呢?

可以通过在 form 标签内，嵌套 textarea 标签来实现。这里的 text 译为文本，area译为区域，textarea 连起来就是文本域的意思。

textarea 是一个双标签，基本语法格式为：<textarea>文本</textarea>，文本需要放在标签对内部。

打开编辑器，新建一个 textarea.html 文件，自动补全基础代码，在 body 标签内部编写一个 form 表单标签，在 form 标签里面添加文本 "请填写详细地址：" ，紧邻文本后面添加一个 textarea 标签。保存。

用浏览器打开页面，一个多行文本输入框就做好了。点击多行文本输入框，向里面输入文本，当输入的文本触达多行文本框右侧的时候，文本自动换到下一行，一直输入，文本溢出后，文本框会出现滚动条。窗口太小看不到，也可以鼠标拖拽，缩放窗口。

事实上，textarea， 多行文本输入框，是可以设置显示区域的宽度和高度的。

使用 cols 属性，cols 是 columns 的缩写，用来指定一个文本区的可见宽度，值是个数字。使用 rows 属性，用来指定一个文本区域中的可见行数，值也是数字。

回到编辑器，在 textarea 标签上定义 cols 等于 "10" (cols="10") rows 等于 "3" (rows="3")。实现多行文本框的可见大小为 3 行 10 列。保存。

回到浏览器，刷新，多行文本输入框的宽度和高度发生了改变。向框内再次输入数字 "0123456789"，当你输入到 9 的时候，你会发现数字 9 后面与留白位置还可以继续输入。

不要着急，咱们继续输入，随着内容的不断增加，行数也越来越多，同时右侧会随之会产生一个滚动条，在滚动条产生的那一瞬间，我们发现，滚动条是占位置的。

虽然通过 cols 和 rows 能控制可见宽高，但在实际开发项目时，为了美观和输入文本的多样性，一般会通过CSS来控制它的样式。

文本域标签就介绍完了，大家一起动手实现一个吧。

文章配套视频「链接」

天给大家带来的是伸缩的输入框的动画。大家可以看到，点击之后包括用户名往上推，输入框进行升高。其实这个在很多地方也可以用到，在实际项目中。长话短说，看代码区域。

我用开发工具是hpdx开发uni app的，大家应该很熟悉了。vivo式组容器，可以看到里面包含了第二层vivo式组容器、important输入框组件、文本组件，还有一条线。我用i来定义，就是这条线。这里面的有基础同学可以知道，如果是真的时候是一个样式，如果是假的时候另一个样式互相切换的。

怎么在哪控制？通过input的定义了一下，在这使用type-c进行真假的切换。包括这两个线条为什么会延伸高度？因为这地方定义了四十四px和二px，遇到真的时候是一种高度，遇到假时候是一种高度，这是动态的样式，大家要记住。

css部分其实是很少的，就是静态的、固定的。可以看到第一层优势图容器进行全局的定义，第二层就能相对定位和宽度的设置。输入框的样式进行相对定位，那边去透明，文字颜色、字体大小等等。这地方也可以输入文字，对文本也进行了央视的开发。大家可以看我这注释，就是很详细的。

进行线条的定义，就这三部分，大家可以看到，大概思路就这么个思路，大家可以动手去写一下。

喜欢的同学可以点赞收藏，想要源代码的可以找我唠嗑进行获取或者点击下方都行，还是建议大家去动手去写一下。今天推荐的伸缩版的输入框的样式就今天就讲到这里，谢谢大家。