这节课,我们学习表单的多行文本框控件。
多行文本框控件,也称文本域控件。生活中多行文本框随处可见,例如:在线简历中的个人优势区域;在线问卷调查中的个人观点和看法区域;流调信息表中的详细地址,都使用到了多行文本输入框。
多行文本框相对于单行文本框而言,允许用户输入多行文本。文本触达右侧边界后会自动折行;文本超出底部边界后会产生滚动条,可以滚动鼠标滚轮查看完整的输入信息。
在HTML中如何实现多行文本框呢?
可以通过在 form 标签内,嵌套 textarea 标签来实现。这里的 text 译为文本,area译为区域,textarea 连起来就是文本域的意思。
textarea 是一个双标签,基本语法格式为:<textarea>文本</textarea>,文本需要放在标签对内部。
打开编辑器,新建一个 文件,自动补全基础代码,在 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来控制它的样式。
文本域标签就介绍完了,大家一起动手实现一个吧。
文章配套视频「链接」