这节课,咱们学习表单的分组控件。
来看 ” 疫情流调信息表 ” 案例,咱们分明的看到,信息表中有两组边框,把用户须要填写的内容划分成了两个区域:一个根本信息区域,一个窃密信息区域。那这样带有边框和题目的表单控件是如何实现的呢?
分组控件最外层应用 fieldset 标签,语法为: 尖角号 fieldset,尖角号 /fieldset。fieldset 是字段集的意思,引申为表单控件分组。
外面包裹 legend 标签,语法为: 尖角号 legend,尖角号 / legend。legend 是阐明的意思,它给 fieldset 元素定义了一个题目关上编辑器,新建一个 fieldset_legend.html 页面,编写实现根底代码,在 body 外面增加一个 fieldset 标签。
在浏览器中关上页面,这时页面呈现了一个闭合的边框,边框的作用就是为了将相干字段进行视觉上的区块划分。
返回编辑其中,在 fieldset 标签里增加 legend 标签,在 legend 标签里增加 ” 根底信息 ” 作为分组题目。保留。回到浏览器,刷新。分组的题目也定义好了。
兴许你会问,其余的表单控件写在哪里呢?在分组标签中增加其余控件,须要搁置到 legend 标签的后边。回到编辑器,在 legend 标签完结的地位,回车换行。输出 “ 用户名 : ”,编写一个输入框,br 换行。输出 ” 明码: ”,再编写一个明码框。保留。
回到浏览器,刷新。一个根底信息的表单分组就做好了。
表单分组就讲到这里,留个作业:本人入手实现一个窃密信息的分组。加油![文章配套视频链接](https://www.bilibili.com/video/BV1oU4y1278g?p=35)