零基础教你学前端——34,表单分组

这节课,我们学习表单的分组控件。
来看"疫情流调信息表"案例,我们清楚的看到,信息表中有两组边框,把用户需要填写的内容划分成了两个区域:一个基本信息区域,一个保密信息区域。那这样带有边框和标题的表单控件是如何实现的呢?
零基础教你学前端——34,表单分组_第1张图片
分组控件最外层使用 fieldset 标签,语法为: 尖角号 fieldset,尖角号/fieldset。fieldset是字段集的意思,引申为表单控件分组。

里面包裹 legend 标签,语法为: 尖角号 legend,尖角号/ legend。legend是说明的意思,它给 fieldset 元素定义了一个标题打开编辑器,新建一个 fieldset_legend.html 页面,编写完成基础代码,在 body 里面添加一个 fieldset 标签。

在浏览器中打开页面,这时页面出现了一个闭合的边框,边框的作用就是为了将相关字段进行视觉上的区块划分。

返回编辑其中,在 fieldset 标签里添加 legend 标签,在legend 标签里添加"基础信息"作为分组标题。保存。回到浏览器,刷新。分组的标题也定义好了。

也许你会问,其他的表单控件写在哪里呢?在分组标签中添加其他控件,需要放置到legend 标签的后边。回到编辑器,在legend 标签结束的位置,回车换行。输入 "用户名 : " ,编写一个输入框,br 换行。输入"密码: " ,再编写一个密码框。保存。

回到浏览器,刷新。一个基础信息的表单分组就做好了。

零基础教你学前端——34,表单分组_第2张图片

表单分组就讲到这里,留个作业:自己动手完成一个保密信息的分组。加油!
[文章配套视频链接](https://www.bilibili.com/video/BV1oU4y1278g?p=35)

你可能感兴趣的:(前端html)