当前位置：网站首页 > 技术文章 > 正文

零基础教你学前端——29、多行文本框

zhezhongyun 2024-12-25 16:46 38 浏览

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

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

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

在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来控制它的样式。

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

文章配套视频「链接」

相关推荐