HTML：fieldset，元素分组

灰太狼 2022-01-29 07:21 201阅读 0赞

> <fieldset> 标签可以将表单内的相关元素分组。<legend> 标签为 <fieldset> 元素定义标题。

常规用法：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzNTA0OTU_size_16_color_FFFFFF_t_70][]

<fieldset>
        <legend>个人简介</legend>
        <p>昵称：helang</p>
        <p>职业：web前端工程师</p>
        <p>邮箱：helang.love@qq.com</p>
    </fieldset>

![20190521134337347.png][]

大家肯定对上图的样式不陌生，通常都是使用 <div> + <hr> 方式来做遮挡和偏移实现，使用 <fieldset> 能更快更好的实现该效果

<fieldset style="text-align: center;border: none;border-top: #999 solid 1px;color: #333;">
        <legend style="padding: 0 10px;">快捷登录</legend>
    </fieldset>

> 作者：[黄河爱浪][Link 1] QQ：1846492969，邮箱：helang.love@qq.com
> 
> 公众号：`web-7258`，本文原创，著作权归作者所有，转载请注明原链接及出处。
> 
> 更多精彩文章，请扫下方二维码关注我的公众号
> 
> ![20190512094840637.jpg][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMzNTA0OTU_size_16_color_FFFFFF_t_70]: /images/20220129/f759968337a74c509014d4edaad1ddc6.png
[20190521134337347.png]: /images/20220129/4111b392cb1e4ab5a067ffa81180f083.png
[Link 1]: https://blog.csdn.net/u013350495
[20190512094840637.jpg]: /images/20220129/2b051caa4d594f98863b7b64582b7005.png

发表评论取消回复

表情：

评论列表（有 0 条评论，201人围观）

还没有评论，来说两句吧...

相关阅读

相关使用 Python 对相似索引元素上的记录进行分组

![使用 Python 对相似索引元素上的记录进行分组][Python] 在 Python 中，可以使用 pandas 和 numpy 等库对类似索引元素上的记录进行分组，这

朱雀/ 2024年03月17日 21:25/ 0 赞/ 78 阅读

相关 Android RecyclerView的StaggeredGridLayoutManager实现交错排列的子元素分组

Android RecyclerView的StaggeredGridLayoutManager实现交错排列的子元素分组先看实现的结果如图： ![201803

喜欢ヅ旅行/ 2023年10月17日 18:53/ 0 赞/ 30 阅读

相关 MySQL-分组查询与分组函数

分组查询与分组函数分组查询 1.简单的分组 2.可以实现分组前的筛选 3.分组后筛选

雨点打透心脏的1/2处/ 2023年10月08日 21:41/ 0 赞/ 59 阅读

相关 Web(四)构建Web表单-对表单元素分组

第1关\_分组元素相关的概念 ![02f541a39f534e41b0f5999e6c0061a9.png][] 第2关\_对表单元素分组编程要求根据提

r囧r小猫/ 2023年09月24日 14:44/ 0 赞/ 68 阅读

相关 js将数组中相同的元素进行分组必看

function sortClass(sortData){ const groupBy = (array, f) => { let gr

以你之姓@/ 2022年12月16日 13:01/ 0 赞/ 255 阅读

相关 sql 分组求和、分组求平均

SELECT device_type_name, AVG(rate) FROM tb_device_rate GROUP BY device_type_name

小咪咪/ 2022年11月29日 13:06/ 0 赞/ 256 阅读

相关 IReport报表分组与分组统计

1 创建分组以IReport3.7.6为例，新建一个学生成绩统计报表，如下图： ![Center][] 报表共有4列，依次代表学号(id)、姓名(name)、课程

向右看齐/ 2022年08月26日 00:40/ 0 赞/ 535 阅读

相关第 5 章分组元素

摘要： 1.分组元素总汇 2.分组元素解析本章主要探讨 HTML5中分组元素的用法。所谓分组，就是用来组织相关内容的 HTML5 元素，清晰有效的进行归类。

柔光的暖阳◎/ 2022年05月25日 00:20/ 0 赞/ 268 阅读

相关数据库の数据分组（分组函数、对查询结果分组）

分组函数的使用为了进一步方便用户，增强检索功能，SQL提供了许多分组函数，也叫聚集函数，主要包括：表3-10 分组函数

客官°小女子只卖身不卖艺/ 2022年02月20日 08:01/ 0 赞/ 448 阅读

相关 HTML：fieldset，元素分组

> <fieldset> 标签可以将表单内的相关元素分组。<legend> 标签为 <fieldset> 元素定义标题。常规用法： ![watermark_type_Zm

灰太狼/ 2022年01月29日 07:21/ 0 赞/ 202 阅读